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 el-button使用$attrs的一个注意要点

    详解关于element el-button使用$attrs的一个注意要点

    这篇文章主要介绍了详解关于element el-button使用$attrs的一个注意要点,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Template ref在Vue3中的实现原理详解

    Template ref在Vue3中的实现原理详解

    这篇文章主要为大家介绍了Template ref在Vue3中的实现原理示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue实现将图像文件转换为base64

    vue实现将图像文件转换为base64

    这篇文章主要介绍了vue实现将图像文件转换为base64,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-02-02
  • vue中getters的使用与四个map方法的使用方式

    vue中getters的使用与四个map方法的使用方式

    这篇文章主要介绍了vue中getters的使用与四个map方法的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 创建项目及包管理yarn create vite源码学习

    创建项目及包管理yarn create vite源码学习

    这篇文章主要为大家介绍了创建项目及包管理yarn create vite源码学习分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 利用纯Vue.js构建Bootstrap组件

    利用纯Vue.js构建Bootstrap组件

    这篇文章主要介绍了如何使用 Vue.js 和纯 JavaScript 构建 Bootstrap 组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Vue.js设计与实现无限递归学习总结

    Vue.js设计与实现无限递归学习总结

    这篇文章主要为大家介绍了Vue.js设计与实现无限递归学习总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue+echarts实现中国地图流动效果(步骤详解)

    vue+echarts实现中国地图流动效果(步骤详解)

    这篇文章主要介绍了vue+echarts实现中国地图流动效果(步骤详解),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • Vue2实现未登录拦截页面功能的基本步骤和示例代码

    Vue2实现未登录拦截页面功能的基本步骤和示例代码

    在Vue 2中实现未登录拦截页面功能,通常可以通过路由守卫和全局前置守卫来完成,以下是一个基本的实现步骤和示例代码,帮助你创建一个简单的未登录拦截逻辑,需要的朋友可以参考下
    2024-04-04
  • vue中使用双token机制

    vue中使用双token机制

    双Token机制是一种增强身份验证安全性和提升用户体验的技术方案,本文主要介绍了vue中使用双token机制,具有一定的参考价值,感兴趣的可以了解一下
    2025-04-04

最新评论