vue Element 分页时保存勾选框为选中状态，多选框reserve-selection指定row-key保留数据更新之前的数据，清空保存的数据

树洞菇凉

于 2021-12-24 16:33:06 发布

阅读量3.5k

点赞数 4

分类专栏： element vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_37916164/article/details/122131073

版权

vue 同时被 2 个专栏收录

55 篇文章 3 订阅

订阅专栏

element

30 篇文章 2 订阅

订阅专栏

reserve-selection 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

<el-table
    :data="buyerTable"
    :row-key="getRowKey"
    ref="buyerTable"
    @selection-change="handleSelectionChange"
    border>
    <el-table-column
      type="selection"
      :reserve-selection="true"
      width="55"></el-table-column>
</el-table>
 
methods: {
    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
 
    // 列表选择,val选中的表格行数据
    handleSelectionChange(val) {
      console.log(val)
    },
 
    // 清空选择的值
    clearSelect() {
      this.$refs.buyerTable.clearSelection()
    }
}