element ui table 多选跨页

qq_22167557

已于 2022-10-28 13:51:06 修改

阅读量293

点赞数

文章标签： elementui javascript vue.js

于 2022-06-14 11:00:20 首次发布

本文链接：https://blog.csdn.net/qq_22167557/article/details/125274135

版权

1.主要属性

唯一键

:row-key=“rowKeyInit”
设置给每一行唯一id
@ rowKeyInit(row) { return row.recordId },

选中

table中设置selection-change=“handleSelectionChange”

handleSelectionChange(arr) {
      // console.log(arr)
      let selectArray = []
      if (arr && arr.length > 0) {
        selectArray = arr.map((item) => item.recordId)
      }
      // console.log(selectArray)
      this.$emit('handleSelectionChange', selectArray) //将选中数组传给父组件
    },

跨页记忆

在el-table-column的多选框设置:reserve-selection=“true”

完整代码

//HTML
<el-table
      :data="tableData"
      border
      style="width: 100%"
      stripe
      max-height="500"
      ref="recordsData"
      :row-key="rowKeyInit"
      @selection-change="handleSelectionChange"
    >
      >
      <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
      </el-table>
      //JS
    rowKeyInit(row) {
      return row.recordId
    },
    handleSelectionChange(arr) {
      // console.log(arr)
      let selectArray = []
      if (arr && arr.length > 0) {
        selectArray = arr.map((item) => item.recordId)
      }
      // console.log(selectArray)
      this.$emit('handleSelectionChange', selectArray)
    },
    //取消多选
    close(){
     this.$refs.recordsData.clearSelection() //清除选中的数据
     }