根据select下来框的value值获取label值

第一种方法
//通过select上的**change**事件传递value值,根据value遍历下来列表
<select v-model="afforestType" placeholder="请选择绿化类型" clearable @change="tal">
    <option
      v-for="item in typeList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></eoption>
  </select>
tabl(val) {
      let obj = {};
      this.options.map(item => {
        item.id == val && ( obj = item) //用到了js里的运算符号 && 前面为true时返回后面的值
      });
      this.ruleForm.artistName = obj.name;
    },
第二种方法
tabl(val) {
  let obj = {};
  obj = this.options.find(item => {
  	return item.id === val;
  });
   this.ruleForm.artistName = obj.name;
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要根据value展示label,你可以使用el-select的filterable属性结合computed属性或watch来实现。 下面是一个示例代码: ```html <template> <el-select v-model="selectedValue" filterable placeholder="请选择"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </template> <script> export default { data() { return { selectedValue: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' } ] } }, computed: { selectedLabel() { const selectedOption = this.options.find(option => option.value === this.selectedValue) return selectedOption ? selectedOption.label : '' } }, watch: { selectedValue(newValue) { const selectedOption = this.options.find(option => option.value === newValue) if (selectedOption) { this.selectedLabel = selectedOption.label } else { this.selectedLabel = '' } } } } </script> ``` 在上述代码中,我们使用了el-select的filterable属性,它允许用户输入进行筛选。 使用computed属性selectedLabel获取根据selectedValue对应的label。通过在options数组中查找与selectedValue相匹配的选项,并返回其label属性。 通过watch监听selectedValue的变化,如果selectedValue改变,则根据新的找到对应的选项,并将其labelselectedLabel。 这样,当用户输入value或选择一个选项时,el-select会根据value展示对应的label。同时,selectedValue变量会根据用户的输入或选择进行更新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值