欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 获取el-select选中项的label值

程序员文章站 2022-03-26 17:22:38
...

项目需要,点击 el-select 时,获取选中项的label值,参考网上的做法,如下所示:

<el-form-item prop="operateId"
              :label="$t('taskManage.lockTask.table.operateName')+':'">
                  <el-select clearable
                             v-model="formData.operateId"
                             @change="currOperatorChange"
                             :placeholder="$t('taskManage.lockTask.selOperateName')">
                    <el-option v-for="item in operateOption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
</el-form-item>

用 @change=“currOperatorChange” 来监听选中项的改变:

// 操作人选中项发生变化
    currOperatorChangecurrOperatorChange(val) {
      console.log('操作人选中项发生变化', val)
      if (val) {
        let obj = {}
        obj = this.operateOption.find(item => {
          //这里的operateOption就是上面遍历的数据源
          return item.value === val //筛选出匹配数据
        })
        this.formData.operateName = obj.label
        console.log('修改操作人名称', obj.label)
      } else {
        this.formData.operateName = ''
      }
    }