el-table 多选,限制选择数,跨页选择。

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)
    },

 

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值