(vue)表格中的选择框自动返显

(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 {
      	//正常保存提交
	  }
	}
}