Vue+Element-ui<表格分页选中数据>

作者: 誰在花里胡哨 | 来源:发表于2021-08-06 11:45 被阅读0次

2021-08-05 17-01-33.gif
如果你想单纯的实现类似左侧的表格勾选(不考虑右侧的移除功能)，且翻页的时候☑️不会消失，那就简单很多了，可以直接参考下面的代码👇，你也可以试着去 element-ui Table表格中去了解这些属性

          <el-table
            highlight-current-row
            ref="multipleTable"
            :data="tableData"
            @selection-change="handleSelectionChange"
            row-key="每条数据的唯一标示属性（id）"
          >
            <el-table-column
              :reserve-selection="true"
              :selectable="checkSelectable"
              type="selection"
              width="45"
            ></el-table-column>
            <el-table-column prop="userName" label="用户名称"></el-table-column>
          </el-table>

如果你的需求类似于我这边的，那么你可以继续往下看👇👇👇

需求：

1.选中左侧列表数据对应同步右侧列表数据；
2.移除右侧列表数据对应取消左侧列表数据中的选中效果；
3.实现多页面的选中；

问题：

可参考最下方代码加以理解

1.浅拷贝的问题
如果直接 this.multipleSelection = val,那么假如你要修改右侧列表中的用户名称时，会出现同步修改左侧列表中的名称（假如你不需要修改那么可以忽略此问题）
下面的解决方法会出现弊端，在 this.$refs.multipleTable.toggleRowSelection(tabRow) 的时候需要用遍历后的数据才能实现选中和取消
解决

 let _obj = JSON.stringify(val);
 let objClone = JSON.parse(_obj);
 this.multipleSelection = objClone;

2.右侧移除的数据不在左侧列表中的问题
假如在第1页选中了数据，此时会同步到右侧，若翻到第二页，此时去移除右侧的数据时会报错，原因是在调用this.$refs.multipleTable.toggleRowSelection(tabRow)并没有在左侧列表中找到。
此时需要建立一个在当前页面临时删除的数组 multipleSelectionMove ，数组中记录符合此条件的数据,方便在用户再次勾选其它数据中从选项中不再同步对应的数据。
每次切换页面时需要事先滞空 multipleSelectionMove 用于记录当前页的移除数据
解决

    toggleSelection(rows) {
        ...
        if (tabRow) {
          this.$refs.multipleTable.toggleRowSelection(tabRow);
        } else {
          // 遍历发现不存在，储存在临时删除的数组中，数组会在翻页的时候重置
          this.multipleSelectionMove.push(row);
        }
      });
    },

3.基于问题2移除数据后，再次选中其他数据出现的问题
在问题2中有提到过，移除非本页的数据时，会建立一个multipleSelectionMove,此时在element-ui表格中并没有移除对应的记录，所以在用户再次勾选其它数据时，之前移除的数据会再次出现
解决

 handleSelectionChange(val) {
      ...
      if (this.multipleSelectionMove.length) {
        //当存在临时删除数据时，用户再次在左侧勾选，此时会对比出不需要再次同步的数据，这样就不会出现上面提到的问题
        objClone.map((v, index) => {
          this.multipleSelectionMove.map(mo => {
            if (mo.userGuid === v.userGuid) {
              objClone.splice(index, 1, null);
            }
          });
        });
        let arr = objClone.filter(f => f);
        this.multipleSelection = arr;
      } else {
        //当不存在临时删除数据时，即不存在跨页面删除的数据，那么就直接同步勾选数据
        this.multipleSelection = objClone;
      }
}

4.移除非本页数据后，返回之前页，勾选未取消问题
移除非本页，我们无法去调用element-ui表格提供的this.$refs.multipleTable.toggleRowSelection(tabRow),所以此时在element-ui表格的记录中，你移除的选项还在。
此时需要在每次切换页面，请求数据时都会根据element-ui表格的所有选中记录和你右侧的列表数据对比，对比发现没有的，就取消选中。
解决

   ...
          this.$nextTick(() => {
            this.multipleSelectionMove = [];
            let reomveArr = [];
            //从所有选中的数据中去遍历查找，若未找到，则说明在右侧的数据中已经移除，那么就要重新赋值对应的选中项，使其变成未选中的状态
            this.multipleSelectionAll.forEach(row => {
              let findRow = this.multipleSelection.find(
                item => item.userGuid === row.userGuid
              );
              if (!findRow) {
                reomveArr.push(row);
              }
            });
            //将未对比到的数据取消勾选
            this.toggleSelection(reomveArr);
    ...

代码如下：

<template>
  <div>
    <div class="table-line">
      <div>
        <el-table
          style="width:100%"
          max-height="460"
          highlight-current-row
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:'#f1f1f1',color:'#606266'}"
          row-key="userGuid"
        >
          <el-table-column :reserve-selection="true" type="selection" width="45"></el-table-column>
          <el-table-column label="序号" type="index" width="60" align="center">
            <template
              slot-scope="scope"
            >{{(scope.$index + 1) + (queryModel.current-1) * queryModel.size}}</template>
          </el-table-column>
          <el-table-column prop="userName" label="用户名称" width="70"></el-table-column>
        </el-table>
      </div>
      <div style="margin-left:20px">
        <el-table
          style="width:100%"
          max-height="500"
          :data="multipleSelection"
          tooltip-effect="dark"
          :header-cell-style="{background:'#f1f1f1',color:'#606266'}"
        >
          <el-table-column prop="userName" label="用户名称" width="70"></el-table-column>
          <el-table-column label="操作" width="70" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="toRemove(scope.row.userGuid)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination
      style="margin-top:20px"
      @current-change="handleCurrentChange"
      background
      layout="pager"
      :total="queryModel.totalCount"
    ></el-pagination>
  </div>
</template>

<script>
import { getERPSalesAll } from "@/api/erp";
export default {
  data() {
    return {
      multipleSelectionAll: [], //所有处于选择状态下的数据
      tableData: [], //左侧列表数据
      multipleSelection: [], //右侧选择的列表
      multipleSelectionMove: [], //记录右侧临时移除的数据
      //查询条件
      queryModel: {
        current: 1,
        size: 10,
        totalCount: 0,
        keyword: null
      }
    };
  },
  mounted() {
    this.fetchList();
  },
  methods: {
    handleCurrentChange(val) {
      this.queryModel.current = val;
      this.fetchList();
    },
    //表格数据查询
    fetchList() {
      getERPSalesAll(this.queryModel).then(res => {
        if (res.data) {
          this.tableData = res.data.records;
          if (this.queryModel.totalCount === 0) {
            this.queryModel.totalCount = res.data.total;
          }
          /**
           * 翻页时
           * 1.重置临时删除数组
           * 2.若用户在第1页勾选了数据，却在第2页的情况下
           * 通过右侧移除去移除掉该数据，那么在 toggleSelection 方法中并不会去执行 this.$refs.multipleTable.toggleRowSelection()
           * 因此要在翻页的时候去对比右侧数据中被临时删除的数据
           */
          this.$nextTick(() => {
            this.multipleSelectionMove = [];
            let reomveArr = [];
            //从所有选中的数据中去遍历查找，若未找到，则说明在右侧的数据中已经移除，那么就要重新赋值对应的选中项，使其变成未选中的状态
            this.multipleSelectionAll.forEach(row => {
              let findRow = this.multipleSelection.find(
                item => item.userGuid === row.userGuid
              );
              if (!findRow) {
                reomveArr.push(row);
              }
            });
            //将未对比到的数据取消勾选
            this.toggleSelection(reomveArr);
          });
        }
      });
    },
    //勾选对应数据，同步到储存的数据数组中
    handleSelectionChange(val) {
      this.multipleSelectionAll = val;
      //此处使用了深拷贝，因为这里要针对勾选的数据进行手机号的修改，不这样做的话会造成左侧列表数据和右侧数据同步修改
      let _obj = JSON.stringify(val);
      let objClone = JSON.parse(_obj);
      /**
       * 解决问题：当用户在右侧删除了不在本页的数据，并且用户再次勾选，此时 val 中仍然为所有勾选的数据，右侧再次出现之前删除的数据
       * multipleSelectionMove 记录了不在当前页被删除的临时数据
       */
      if (this.multipleSelectionMove.length) {
        //当存在临时删除数据时，用户再次在左侧勾选，此时会对比出不需要再次同步的数据，这样就不会出现上面提到的问题
        objClone.map((v, index) => {
          this.multipleSelectionMove.map(mo => {
            if (mo.userGuid === v.userGuid) {
              objClone.splice(index, 1, null);
            }
          });
        });
        let arr = objClone.filter(f => f);
        this.multipleSelection = arr;
      } else {
        //当不存在临时删除数据时，即不存在跨页面删除的数据，那么就直接同步勾选数据
        this.multipleSelection = objClone;
      }
    },
    //移除选择的用户
    toRemove(id) {
      //找到对应的数据下标
      let index = this.multipleSelection.findIndex(
        item => item.userGuid === id
      );
      let row = this.multipleSelection[index];
      //移除时需要移除储存数据的数组
      this.multipleSelection.splice(index, 1);
      //移除后执行此方法，用来消除列表中勾选的数据
      this.toggleSelection([row]);
    },
    //用于同步消除勾选的列表数据
    toggleSelection(rows) {
      /**
       * 因为在同步勾选数据 handleSelectionChange 中我们做了深拷贝
       * 所以在这里如果直接执行this.$refs.multipleTable.toggleRowSelection()方法是无效的（原因目前不清楚）
       * 因此通过对比左侧数据，判断右侧移除的数据是否在其中（原因：在分页情况下，去取消未在当前页的数据时会报错，所以才建立了 临时删除数组 multipleSelectionMove）
       */
      rows.map(row => {
        let tabRow = this.tableData.find(
          item => row.userGuid === item.userGuid
        );
        // 遍历发现存在，取消勾选
        if (tabRow) {
          this.$refs.multipleTable.toggleRowSelection(tabRow);
        } else {
          // 遍历发现不存在，储存在临时删除的数组中，数组会在翻页的时候重置
          this.multipleSelectionMove.push(row);
          // console.log(this.multipleSelectionMove);
        }
      });
    }
  }
};
</script>

<style  scoped>
.table-line {
  display: flex;
}
</style>

Vue+Element-ui<表格分页选中数据>

需求：

问题：

代码如下：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue