Loading
0

如何让ElementUi的多选框表格,翻页选中有记忆功能保持默认选中教程

公众号搜索菜鸟站长之家

在用vue开发表格多选功能时,遇到一个翻页后需要保持之前选中的状态。简单说就是让表格翻页选中仍然有记忆功能。

我用的是ElementUi,不得不说ElementUi做的还是非常好的。

废话不多说,下面描述实现的步骤和代码

第一步:给表格添加 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"

注意id需要唯一

 

其他可能用到的方法

@selection-change 会返回所有选中的数据
@select 会返回所有选中的数据及当前操作的数据

清空所有选中

this.$refs.table.clearSelection();//页面中有搜索或重置时可能会用到。

默认选中

this.$refs.table.toggleRowSelection(this.list[index]);//必须传表格的数据;以数组[下标]格式传递.

如果你是用的自定义的单选框,可以参考

单选框

<el-table
      :data="list"
      ref="multipleTable"
      :row-key="(row)=>{ return row.classId}"
      @current-change="handleCurrentRadio"
      style="width: 100%">
      <el-table-column width="80" v-if="radioShow">
        <template slot-scope="scope">
          <el-radio v-model="radio"  :label="scope.row.classId">{{''}}</el-radio>
        </template>
              </el-table-column>
    </el-table>

@current-change="handleCurrentRadio"会返回选中的数据。可以在这个事件用return false 来阻止选中
//label 和原生的value属性一样。 利用v-model来绑定唯一值,意味着label的值为唯一的。
//{{""}}为了让单选框不显示label。

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。
4、转载请保留原文地址,违者后果自负,本站保留一切法律追责权力。