vue+ElementUi 选择框选中之后翻页进行状态保持

复选框

<el-table
:data="list"
ref="multipleTable"
:row-key="(row)=>{ return row.classId}"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column type="selection" :reserve-selection="true" ></el-table-column>
</el-table>

//切换分页持久化选中表格

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

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

清空所有选中

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

默认选中

this.$refs.multipleTable.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。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值