el-table 多选回显编辑处理

最新推荐文章于 2024-07-08 12:14:04 发布

qq_41781984

最新推荐文章于 2024-07-08 12:14:04 发布

阅读量352

点赞数 8

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_41781984/article/details/140101082

版权

el-table 多选回显编辑

<el-table :data="tableData" border :row-key="(row) => row.id" ref="multipleTable"
  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @selection-change="handleSelectionChange">
  <el-table-column type="selection" :reserve-selection="true" width="50" align="center"></el-table-column>
  <el-table-column type="index" width="50" label="序号" align="center">
  </el-table-column>
  <el-table-column prop="name" label="姓名" align="center">
  </el-table-column>
  <el-table-column prop="id" label="账号" align="center">
  </el-table-column>
</el-table>
<div class="page">
  <pagination v-show="total > 0" :total="total" :page.sync="searchForm.current"
    :limit.sync="searchForm.size" @pagination="getList" />
</div>

handleSelectionChange(val) {
  this.selectList  = val;
  //编辑处理--
  let editSelectList = JSON.parse(JSON.stringify(this.editSelectList));
  if(tableData.length > 0){
    let intersectionSet = this.minusFn(tableData,this.tableData);
    let arrObj = [...val,...intersectionSet];
    let maps = new Map();
    for (let item of arrObj) {
        if (!maps.has(item.id)) {
            maps.set(item.id, item);
        };
    };
    this.selectList = [...maps.values()];
  }
},
minusFn(a = [], b = []) {
  let result = a.filter(aItem => b.every(bItem => aItem.id !== bItem.id));
  return [...result];
},

async getPersonList() {
  let res = await getDataInfo(
    "/api/personList/page",
    this.personSearch
  ).catch((err) => {
    console.log("错误:", err);
  });
  if (res.code == 200 && res.data) {
    this.tableData = res.data.records;
    this.total = res.data.total;
    this.$nextTick(() => {
        if(this.editSelectList.length > 0 ){
          this.tableData.forEach(row => {
            this.editSelectList.forEach(rows => {
              if (row.id === rows.id) {
                this.$refs.multipleTable.toggleRowSelection(row, true);
              }
            });
          });
        }
        if(this.editSelectList.length == 0 && this.$refs.multipleTable){
          this.$refs.multipleTable.clearSelection();
        }
        this.selectList = [...this.editSelectList];
    });
  }
},

 editRow(row) {
  //编辑回显已选择的数据
  this.editSelect = JSON.parse(JSON.stringify(row.idLists));
  this.dialogVisible = true;
},

 handleSave(row) {
  //保存
  this.editSelect = JSON.parse(JSON.stringify(this.selectList));
  let params = {
	  id:this.selectList.map((item) => item.id).join(',')
	  name:this.selectList.map((item) => item.name).join(',')
  }
},