vue el-table多选回显、编辑结合el-tag

置顶一个有思想的新时代农民工

已于 2023-03-02 16:07:59 修改

阅读量2.3k

点赞数 1

分类专栏：总结文章标签： element el-table 表格多选 el-tag 关联表格

于 2023-03-02 16:02:20 首次发布

本文链接：https://blog.csdn.net/ShaLiWa/article/details/129301271

版权

总结专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果图如下：

上面的 el-tag 和下边的 el-table 多选是关联的

要解决的问题：

如果是编辑接口返回多选数据 el-tag 和 el-table 都需要回显
翻页的数据也需要能回显
el-tag 可以删除，并且同步到 el-table
el-table 的选中状态需要同步到 el-tag (这里需要注意的是单选和多选都要考虑到)
详情的时候 el-tag 和 el-table 禁止操作

下面是上代码示例：
在这里插入图片描述

一、`el-table` 主要依赖这三个属性：

:reserve-selection="true" 是保证 el-table 可以翻页保存选中数据的
@select='onSelect' 是当用户手动勾选数据行的 Checkbox 时触发的事件，两个参数——第一个参数代表选中状态，第二个参数是当前行
@select-all="selectAll" 是当用户手动勾选全选 Checkbox 时触发的事件，如果是选中则返回当前页所有数据，如果取消全选则返回空

代码展示：

//supervisionInspected是el-tag遍历的对象
onSelect(rows, row) {
	//这个方法主要是在手动勾选数据行时同步到 el-tag
      let selected = rows.includes(row);
      if(selected){
        //勾选
        this.supervisionInspected.push(row)
      }else{
        //不勾选
        let idx = this.supervisionInspected.findIndex(item=>item.basicUnitId === row.basicUnitId)
        if(idx>-1){
          this.supervisionInspected.splice(idx, 1)
        }
      }
      // console.log(selected,'onSelect',rows,row)  // true就是选中，0或者false是取消选中
    },
    uniqueFunc(arr, uniId){
    //去重
      const res = new Map();
      return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
    },
    selectAll(val){
    //这个方法主要是为了多选和取消多选的时候同步到 el-tag
      if(val.length){
        //全选
        let arr = deepClone(this.supervisionInspected).concat(val)
        this.supervisionInspected = this.uniqueFunc(arr,'basicUnitId')
      }else{
        //取消全选
        const ids=this.tableData.map(item=>item.basicUnitId)
        this.supervisionInspected =this.supervisionInspected .filter(item=>!ids.includes(item.basicUnitId))
      }
    },
    //在列表接口返回后能回显需要选中的数据行，这里需要注意顺序——需要先拿到选中数据行
     getSysCompany() {
      querySysCompany().then((res) => {
        this.tableData = res.rows;
        //通过路由ID判断是否为新增，因为只有详情和编辑需要回显
        if(this.$route.query.id){
          // 遍历选中的行的 ID 数组，重新选中已选中的行
          let ids = this.supervisionInspected.map(item=>item.basicUnitId)
          ids.forEach((id) => {
            const row = this.tableData.find(row => row.basicUnitId === id)
            if (row) {
              this.$nextTick(()=>{
                this.$refs.multipleTable.toggleRowSelection(row, true)
              })
            }
          })
        }
      });
    },

二、 `el-tag` 主要依赖一个属性：

@close="handleClose(item)" 手动删除的时候同步到 el-table

 <el-tag
              v-for="(item, index) in supervisionInspected"
              :key="index"
              class="inspected-unit mr5"
              :closable="$route.query.type!== 'detail'"
              :disable-transitions="false"
              @close="handleClose(item)"
            >
              {{ item.basicUnitName }}
            </el-tag>

对应js代码如下

handleClose(id){
      const index = this.supervisionInspected.indexOf(id)
      if (index >= 0) {
        this.supervisionInspected.splice(index, 1)
        const row = this.tableData.find(row => row.basicUnitId === id.basicUnitId)
        //通过ID 查找到el-table中对应的数据，然后把选中状态置为 false
        if (row) {
          this.$nextTick(()=>{
            this.$refs.multipleTable.toggleRowSelection(row, false)
          })
        }
      }
    },