Element-ui中的table组件的 全选功能 及选择框部分禁用功能

Element-ui中的table 全选功能 及选择框部分禁用功能

实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可（文档里面有代码模板）
代码如下：

<el-table v-loading="loading" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column :selectable="checkboxState" type="selection" width="55" />
      <el-table-column label="用户id" align="center" prop="userId" />
      <el-table-column label="用户昵称" align="center" prop="nickName" />
      <el-table-column label="提现金额" align="center" prop="withdrawnNum" />
      <el-table-column label="提现时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{
   
   { scope.row.createTime | fParseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="withdrawnStatus">
        <template slot-scope="scope">
          <div class="input-box">
            <span> {
   
   { scope.row.withdrawnStatus === 1 ? '未处理' : '已发放' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="operator" />
    </el-table>

这里主要有个状态需要做判断，未处理的时候可以选择并点击发放按钮，若状态为已发放咋不可以选择：

首先table表格的选中事件：@selection-change="handleSelectionChange"（可以在这个方法里操作，可批量获取到你选中的数据）
其次，在表格初始化时，设置selectable属性，参数为（row）row为选中该条的记录数据，该方法只在复选框一项生效。:selectable="checkboxState"
方法里面：

methods:{
    
    
	checkboxState(row, index) {
    
      //index表示第几条数据
	//withdrawnStatus是服务端返回的属性，1：未处理，2：已发放
      	if (row.withdrawnStatus === 2) {
    
    
        	return false
      	} else {
    
    
       		 return true
      	}
      	// console.log(index, 'index-----')
    },
}