Vue Element Table 跨页面多选功能

前言 vue + element ui 已经成很多后台管理的选择框架

问题：

• 后台管理系统需要很多table 的展示，一般都还是做分页效果的展示
• 导出功能选择项，以及跨页面进行选择就是问题？

解决办法：row-key

效果图
第一步：el-table绑定 row-key 和 selection-change

      <el-table
        :row-key="getRowKeys"  //methods 中定义的function
        :data="tableData"
        @selection-change="getSelectionChange"
      >

或者

      <el-table
        row-key="id"
        :data="tableData"
        @selection-change="getSelectionChange"
      >

解释： row-key 支持多种方式，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

官网方法

2.将selection列设置reserve-selection=true

       <el-table-column type="selection" :reserve-selection="true" width="55">
        </el-table-column>

3. methods 中定义方法`

   getRowKeys(row) {
      return row.id;
    },
    getSelectionChange(val) {
      console.log(val, "====getSelectionChange");
    },

我还有更加繁琐的方法，你要看吗？哈哈！ps：因为以前不知道，所以一直都用繁琐的方法。