el-table的多选框（默认全选，条件性渲染，动态勾选等功能）

前言

最近一直在跟表格里的多选框做斗争，一开始觉得el-table本身的多选框不满足我的需求，想要自定义el-checkbox来实现，结果发现很多坑，还没解决（主要是数据绑定不同步更新的问题），感觉蛮花时间的，又回头看看el-table有没有方法能完善一下，结果成功了，虽然具体实现过程还是很。。。低级，希望可以借鉴这个寻找更好的解决方案，故此记录

页面元素：单选框、输入框、带多选框的表格

需求

针对页面元素说明功能需求如下

1. 表格
   • 带多选框
   • 多选框带条件性渲染，满足某条件，多选框不显示
   • 多选框默认全选中
2. 单选框
   • 根据单选框的切换控制表格多选框是否禁用
3. 输入框
   • 显示多选框选中的数量
   • 手动输入的数字不能超过表格可选数据的总数量
   • 手动输入数字，动态按顺序勾选多选框指定数量的数据

实现

el-table 本身就有多选框的功能

故只要加上<el-table-column type="selection"/>就可以为表格加上多选框
以下为我的表格代码

<el-table ref="dataTable"
          :data="goodsList"
          highlight-current-row
          stripe
          :fit="true"
          type="index"
          :cell-class-name="isRender"
          @selection-change="handleGoodsChange">
      <el-table-column type="selection"
                       width="50"
                       :selectable="checkSelectable" />
      <el-table-column prop="name"
                       label="商品名称"
                       sortable />
      <el-table-column prop="code"
                       label="商品编码"
                       sortable />
      <el-table-column prop="unitprice"
                       sortable
                       label="单价" />
      <el-table-column prop="num"
                       label="数量"
                       sortable />
      <el-table-column prop="unit"
                       label="单位"
                       sortable />
      <el-table-column prop="price"
                       sortable
                       label="金额" />
    </el-table>

由此带多选框表格有了

控制多选框是否渲染

使用动态class为满足条件的行添加display:none样式隐藏多选框

:cell-class-name="isRender" //为表格的每一行添加class

/**
     * 条件判断，添加样式
     * @param row
     * @returns classname
 */
isRender (row) {
     if (row.row.status === '1') {
        return 'disabled-column'
     }
}
<style>
 /* 隐藏多选框 */
.disabled-column .el-checkbox__input {
  display: none;
}
</style>

默认多选框全选

使用toggleAllSelection()切换所有行的选中状态，刚初始化页面的时候即为全选

mounted () {
    this.$refs.dataTable.toggleAllSelection()
  },

单选框和输入框的页面元素代码如下

<div>
    <div style="float: left;">
      <el-row>
        <el-radio v-model="selection"
                  label="1"
                  @change="handleSelectionChange">
          <template>
            勾选商品/勾选前
            <el-input v-model="selectedSize"
                      class="el-input--mini"
                      max="goodsList.length"
                      @input="limitMax()" />
            <el-button type="primary"
                       size="small"
                       :disabled="selection==='2'"
                       @click="confirmSelect">确认勾选</el-button>
          </template>
        </el-radio>
      </el-row>
      <el-row style="float: left;">
        <el-radio v-model="selection"
                  label="2"
                  @change="handleSelectionChange">最大限额自动拆分</el-radio>
      </el-row>
</div>

单选框切换，多选框禁用

需要分为两个步骤

1. 首先多选框全部选中
   对表格数据进行遍历，调用toggleRowSelection(row,true)切换行的选中状态为true,并且排除不可选的行数据

 /**
     * 条件判断，多选框全选
     *
 */
 handleSelectionChange () {
      if (this.selection !== '1') {
        for (let i = 0; i < this.goodsList.length; i++) {
          if (this.goodsList[i].status !== '1') {
            this.$refs.dataTable.toggleRowSelection(this.goodsList[i], true)
          }
        }
      }
},

1. 多选框全部禁用
   多选框使用selectable决定这一行是否可以勾选
   注意：不显示多选框的行也要禁用，这样在使用toggleAllSelection()不会选中这些行

:selectable="checkSelectable"

/**
     * 条件判断，当前行多选框是否禁用
     * @param 列表数据
     * @returns true/不禁用 false/禁用
*/
checkSelectable (row) {
      if (row.status === '1') {  //禁用不可选行
        return false
      }
      if (this.selection === '1') {  //判断单选框值
        return true
      } else {
        return false
      }
},

输入框显示表格选中的数量

watch: {
/**
     * 监控表格选中的数据，更新输入框显示的数值
     *
*/
selectedGoodsList: {
      handler (newval, old) {
        this.selectedSize = newval.length
      }
    }
}

输入框限制输入数值的大小

el-input有max属性，但是有bug，故添加了方法自己判断

<el-input v-model="selectedSize"
                      class="el-input--mini"
                      max="goodsList.length" //木有用
                      @input="limitMax()" />
/**
     * 限制输入的最大值
     *
*/
limitMax () {
      const maxSize = this.goodsList.length - this.disablegoodlist.length
      if (this.selectedSize > maxSize) {
        this.selectedSize = maxSize
      }
}

手动勾选表格指定数量的数据

大概思路如下：
-使用clearSelection()清空表格勾选状态，
-遍历表格数据，如果不是不可选数据，则动态选中，如果是不可选的数据，遍历条件+1，直到循环结束

/**
     * 根据输入框的值动态勾选多选框
     *
*/
confirmSelect () {
      this.$refs.dataTable.clearSelection()
      let count = this.selectedSize
      for (let i = 0; i < count; i++) {
        if (this.goodsList[i].status !== '1') {
          this.$refs.dataTable.toggleRowSelection(this.goodsList[i], true)
        } else {
          count++
        }
      }
}

页面展示

 

image.png

 

 

image.png

 

 

 

image.png