select 获取value和lable值

最新推荐文章于 2024-07-08 18:24:30 发布

一条小可爱

最新推荐文章于 2024-07-08 18:24:30 发布

阅读量986

点赞数

本文链接：https://blog.csdn.net/weixin_45168482/article/details/116263141

版权

本文介绍了如何使用Element UI的el-select组件，配合v-model绑定和@change事件，实现在下拉选择部门时，获取并更新ruleForm对象中的level属性。同时展示了如何在data中接收选中的部门代码和名称。

摘要由CSDN通过智能技术生成

使用@change方法

<el-form-item label="部门：" prop="region">
   <el-select v-model="ruleForm.level" @change="selectGet" placeholder="请选择部门名称" style="width:100%">
      <el-option
         v-for="item in positionList"
          :key="item.dictCode"
          :label="item.dictText"
          :value="`${item.dictCode},${item.dictText}`">
      </el-option>
   </el-select>
</el-form-item>

ruleForm:{
        level:'',
      },
positionList:[
        {
          dictCode:'A',
          dictText:'总经理'
        },
        {
          dictCode:'B',
          dictText:'副总经理'
        },
        {
          dictCode:'C',
          dictText:'总监'
        },
        {
          dictCode:'D',
          dictText:'副总监'
        }

selectChange(val){
      let [dictCode,dictText] = val.split(",");
      console.log("dictCode为",dictCode,"dictText为",dictText);
      //在data中定义两个字段用来接收
      this.dictCode = dictCode
      this.dictText = dictText
    },