row.id" 第二步:给多选框...">
美文网首页
elementUI table 多选框表格,翻页选中有记忆功能保

elementUI table 多选框表格,翻页选中有记忆功能保

作者: 八妹sss | 来源:发表于2020-08-17 15:07 被阅读0次

第一步:给表格添加 row-key

<el-table
   :data="data"
   ref="tableData"
   @selection-change="onSelectInvoiceItem"
   :row-key="(row) => row.id"
    @select-all="onSelectAll"
>
</el-table>

关键点::row-key="(row) => row.id"

第二步:给多选框加默认选中功能

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

关键点::reserve-selection="true"

总结:
切换分页持久化选中表格,其实关键代码就这2行

:row-key="(row)=>{ return row.id}"
:reserve-selection="true"

原文链接:http://www.jsphp.net/vue/show-25-394-1.html

补充:多选删除,页码问题
例如:一共54条,每页10条,一共是6页;现在在第4页,删除36条数据后 页码应该在第2页,怎么处理呢

    // 删除成功设置页码
    handlePage () {
      // 选中的条数
      let selectLen = this.selectDeleteWhitelist.length
      // 目标条数 = 总的-选中的
      let dataLen = this.count - selectLen
      // 目标最大页码page
      let maxPage = Math.ceil(dataLen / 10)
      if (this.page > maxPage) {
        this.page = maxPage
      }
      // 重置表格的多选
      this.$refs.tableDom.clearSelection()
      this.getTable()
    },

相关文章

网友评论

      本文标题:elementUI table 多选框表格,翻页选中有记忆功能保

      本文链接:https://www.haomeiwen.com/subject/sudqjktx.html