使用el-table限制多选个数

Posted 2023-03-18

参考技术A      <el-table             

      @selection-change="getSelectArr"        

    getSelectArr(e) 里面的e就是返回的勾选值

      // ---------- html   ----------- 

    <el-table-column type="selection"  :selectable="checkStatus"> </el-table-column>

    //---------  js method -----------

    checkStatus(row)

      // 当勾选个数大于限定个数（limit ）且当前不在勾选状态时 禁止勾选

      const selectArr = ( getSelectArr 获取的勾选数组）

      const state = selectArr.some(item=>item.id == row.id)

      return  selectArr.length < this.limit  || state

   

    

此时点击全部勾选，当全部个数超过限定个数的时候还是能被全部勾选，我们需要一个处理结果就是，即使用户点击了全部勾选，我们默认表格指定个数前几个，其他的处于禁用状态，只需要对checkStatus这个方法内获取勾选数据进行处理

const selectArr = this.$refs.multipleTable.store.states.selection

    

解决使用 el-table 中使用多选框 Checkbox 不刷新问题

问题

在 el-table 中使用 Checkbox 仅作为展示时，v-model 双向绑定就变得不那么适用了，这时候我们会使用 checked 属性来代替v-model。

问题来了当使用 filter 过滤 table 的数据时 vue 可能检测不到 checked 值的改变。

解决方法

Checkbox 仅展示的时候使用 value 属性代替 v-model。