vue拿到下拉框el-select的选择项的value和label
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
此场景分为两种情况
1.单独一个下拉框时
2.el-table每行数据都有下拉框时
这里只介绍第 2 种情况,方法都是一样的
思路:
1.首先选择下拉框事件拿到选择的这行数据scope.row
2.其次去遍历绑定的下拉框数据,使用find()方法查找item.value === row.value
3.找到则返回对应的row.label
4.最后将label值以键值对形式加到row对象中
代码实例:
<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;
},
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)