Element分页多选功能

1.Element的多选功能
html除了:row-key=“getRowKeys”,多选框的第一列一定要加上type="selection" 和 :reserve-selection="true"
不加发现:回上一页发现勾选的框被清空了
reserve-selection,Element上解释为:仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key)

<el-table ref="multipleTable" :data="tableData" border v-loading="tableLoading"  @selection-change="handleSelectionChange" :row-key="getRowKeys" >
 <el-table-column type="selection" :reserve-selection="true" width="40px" fixed="left"></el-table-column>

js

handleSelectionChange(val) {
   this.SelectionList = val;
},
// 分页多选功能的rowKey获取
getRowKeys(row) {
  return row.id//id
},
// 完成清空跨页多选
clearSelection() {
  if (this.$refs.multipleTable) {
    this.$refs.multipleTable.clearSelection();
  }
},

2.iview-admin的多选功能
iview-admin和element不一个组件库,用法有点区别,很容易入坑
(1) @on-selection-change="changeCheckbox" 事件传参,
(2)回显的数组对象中:_checked: true,记住这个组件库只认_checked,接口返回不带下划线就回显不出来

  <!-- :row-key="getRowKeys"/row-key="id" element的用row-key iview-admin默认_checked -->
<Table :columns="columns" :data="couponList" ref="multipleTable" class="mt25" 
		 :loading="loading" highlight-row border  @on-selection-change="changeCheckbox"
		  no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
</Table>
data() {
    return {
	  columns: [
		    {
		      title: "选择",
		      key: "id",
		  	  type: "selection",
		      width: 60
		    },
	  ]
    }
}
// 多选传参
changeCheckbox(selection) {
	this.formData.coupon_list = selection;
},
//回显测试
this.couponList.forEach(el => {
	if(el.checked===true){ 
		this.$set(el, '_checked', true)
	}
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值