element-ui中的table分页可进行批量操作

element-ui中的table分页可进行批量操作

项目需求

可以批量操作table中不同分页选择的行数据

依据

官方解释:

实例

• 在el-table中添加:row-key=“getRowKeys”

<el-table
   ref="multipleTable"
   :data="tableData"
   tooltip-effect="dark"
   style="width: 100%"
   :row-key="getRowKeys"
   @selection-change="handleSelectionChange"
   @select-all="cli"
   >

• 然后第一列，即有多选框的一列，添加:reserve-selection=“true”

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

• 然后在methods中添加函数：

getRowKeys(row) {
        return row.tagId;
    },

• 完成后需要清空选中,不然会在下一个批量操作中记录上一次选中的数据

this.$refs.form.clearSelection();

希望对你帮助