handleSelectionChange 行选择事件
selectable 是否禁止选择框,判断是否已经选择,已经选择就不会禁止。
<el-col :span="10" :xs="24">
<h6>待选人员</h6>
<el-table
row-key="userId"
max-height="500"
ref="multipleTable"
:data="userList"
border
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" :selectable="selectable" :reserve-selection="true" width="50" align="center" />
<el-table-column label="用户名" align="center" prop="nickName" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
</el-table>
</el-col>
<el-col :span="8" :xs="24">
<h6>已选人员
<el-badge :value="(this.$refs.multipleTable ? this.$refs.multipleTable.selection.length : 0) +'/' + this.selectMax">
</el-badge>
</h6>
<el-tag
v-for="(user,index) in this.$refs.multipleTable ? this.$refs.multipleTable.selection : []"
:key="index"
closable
@close="handleClose(user)">
{{user.nickName}} {{user.dept ? user.dept.deptName:''}}
</el-tag>
</el-col>
// 选择最大人员数,默认0 不限制
selectMax: {
type: Number,
default: 0
}
//置灰部分选择
selectable(row, index){
let isSelected = this.$refs.multipleTable.selection.includes(row)
return !(this.selectMax > 0 && this.$refs.multipleTable.selection.length >= this.selectMax) || isSelected;
},
// 多选框选中数据
handleSelectionChange(selection) {
if (selection) {
if (this.selectMax > 0 && selection.length >= this.selectMax) {
// 截取20位后,不需要的数据
let tempArr = selection.slice(this.selectMax);
tempArr.forEach((ele) => {
this.$refs.multipleTable.toggleRowSelection(ele, false);
});
// 截取前20位
selection = selection.slice(0, this.selectMax);
}
}
},
// 关闭标签
handleClose(tag) {
this.$refs.multipleTable.toggleRowSelection(tag, false)
},