vue拿到下拉框el-select的选择项的value和label-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue拿到下拉框el-select的选择项的value和label。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

此场景分为两种情况

1.单独一个下拉框时

2.el-table每行数据都有下拉框时

vue拿到下拉框el-select的选择项的value和label,vue,uniapp,vue.js,前端,javascript

这里只介绍第 2 种情况，方法都是一样的

思路：

1.首先选择下拉框事件拿到选择的这行数据scope.row

2.其次去遍历绑定的下拉框数据，使用find（）方法查找item.value === row.value

3.找到则返回对应的row.label

4.最后将label值以键值对形式加到row对象中

代码实例：文章来源地址https://www.toymoban.com/news/detail-515756.html

     <el-table-column label="日期" width="120">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.dependOptions"
              placeholder=""
              @change="updateValueT(scope.row)"
            >
              <el-option
                v-for="list in dependOptions"
                :key="list.value"
                :label="list.label"
                :value="list.value"
              />
            </el-select>
          </template>
        </el-table-column>

//方法
   updateValueT(row) {
      //el-table表格有多行数据  选择下拉框拿到value和label，并添加个selectType字段返回给row ****非常常用的知识点
      console.log(row);
      const selectedLabel = this.dependOptions.find(
        (ele) => ele.value === row.dependOptions
      ).label;
      console.log(selectedLabel, "selectedLabel");
      this.$set(row, "slectType", selectedLabel);
      console.log(row, "row");
      return row;
    },

到了这里，关于vue拿到下拉框el-select的选择项的value和label的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！