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

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>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容