首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element ui Select选择器设置默认状态

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

2023-10-08 16:15:51 作者：阿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控制传给后台的字段

总结

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