vue element ui Select选择器如何设置默认状态

 更新时间:2023年10月08日 16:19:34   作者:阿wei程序媛  
这篇文章主要介绍了vue element ui Select选择器如何设置默认状态问题,具有很好的参考价值,希望对大家有所帮助,

element ui Select选择器设置默认状态

效果图:

将系列状态默认为上架状态。

代码实现

1.HTML

<el-select v-model="queryParams.status" clearable placeholder="请选择状态">
    <el-option
       v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
    </el-option>
</el-select>

2.js

 data(){
    return {
      editBoxShow:false,
      queryParams:{
        cateName:'',
        sortIndex:"",
        status:"",
      },
      options: [
        {
        value: 1,
        label: '上架'
      }, {
        value: 2,
        label: '下架'
      }],
    }
  },
 mounted() {
    this.queryParams.status=1//页面加载进来的时候设置
  },

以上代码就可以实现其功能

element ui中select选择器的label和value

 <el-table-column prop="componentType" label="组件类型" width="200px">
 <template #default="scope">
 <el-select @change="xiala(scope.row.componentType, scope.$index)"
	v-model="scope.row.componentType"
	name="scope.row.componentType"
	placeholder="请选择"
		:disabled="!scope.row.isEdit"
		:clearable="false"
		:multiple="false"
		:filterable="false">
 <el-option v-for="item in selectdata.list" :key="item.key" :value="item.key" :????????????????????????label="item.label">
</el-option>
</el-select>
</template>
</el-table-column>

label控制用户看到的选项

 

value控制传给后台的字段

 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element-ui多文件上传的实现示例

    element-ui多文件上传的实现示例

    这篇文章主要介绍了element-ui多文件上传的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue与React的区别和优势对比

    Vue与React的区别和优势对比

    这篇文章主要介绍了Vue与React的区别和优势对比,帮助大家更好的选择适合自己的前端框架,迷茫的同学可以进来参考下
    2020-12-12
  • Vue 2.0 基础详细

    Vue 2.0 基础详细

    这篇文章主要介绍了Vue 2.0 基础,具体内容有、基本语法、生命周期、路由管理Vue-Router、状态管理Vuex、Http请求库Axios,想详细了解的小伙伴请和现编一起学习下面文章内容吧
    2021-10-10
  • vue3与ts组件封装提高代码复用性

    vue3与ts组件封装提高代码复用性

    这篇文章主要为大家介绍了vue3与ts组件封装提高代码复用性示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue2 自定义动态组件所遇到的问题

    vue2 自定义动态组件所遇到的问题

    这篇文章主要介绍了vue2 自定义 动态组件的实现方法,需要的朋友可以参考下
    2017-06-06
  • 详解Vue.js和layui日期控件冲突问题解决办法

    详解Vue.js和layui日期控件冲突问题解决办法

    这篇文章主要介绍了详解Vue.js和layui日期控件冲突问题解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 利用Vue实现简易播放器的完整代码

    利用Vue实现简易播放器的完整代码

    这篇文章主要给大家介绍了关于如何利用Vue实现简易播放器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue操作动画的记录animate.css实例代码

    vue操作动画的记录animate.css实例代码

    这篇文章主要介绍了vue操作动画的记录animate.css的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue3中列表拖拽排序的实现示例

    Vue3中列表拖拽排序的实现示例

    本文主要介绍了Vue3中列表拖拽排序的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Vue安装Element Plus全过程

    Vue安装Element Plus全过程

    这篇文章主要介绍了Vue安装Element Plus全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论