(vue)表格中的选择框自动返显
效果:
代码
<Input class="filter" placeholder="请输入选择的..." v-model="assets"/> //第一个过滤条件
...
<el-table class="tableMain" :data="dataListNew">
<el-table-column align="center" prop="name" label="属性"></el-table-column>
<el-table-column align="center" label="数据列">
<template slot-scope="scope">
<Select
v-model="scope.row.mapping"
placeholder="请选择数据列"
class="filter"
filterable
:transfer="true"
:popper-append-to-body="false"
>
<Option
v-for="item in sourceOption"
:value="item.col_name"
:key="item.col_name"
>{{ item.col_name }}</Option>
</Select>
</template>
</el-table-column>
</el-table>
js
data() {
return {
assets: "",
//表格
columns: [
{
title: "属性",
key: "name",
align: "center",
},
{
title: "数据源/列",
slot: "mapping",
align: "center",
},
],
sourceOption: [], //表格下拉选框的option
}
},
watch: {
assets: {
deep: true,
handler(newVal) {
executeHiveSql(newVal).then((res) => {
this.sourceOption = res.data.data.datas;//表格下拉选框
});
},
},
},
methods:{
//保存
addOk() {
//检查表格每行的选框是否有值
let arrShow = false;
this.dataListNew.forEach((item) => {
if (item.mapping == "null") {
arrShow = true;
return;
}
});
if (arrShow) {
this.$Message.warning("请选择所有对应的数据列!");
} else {
//正常保存提交
}
}
}