elementUI中的el-table勾选框设置默认勾选、禁用

elementUI中的el-table勾选框设置默认勾选、禁用

最近项目中有这个一个需求：请求后端列表数据，根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态，
如果remark=“1”,是勾选状态且该勾选框变为禁用状态；反之，如果remark !=“1”，则不是勾选状态且用户可以进行勾选
当用户手动进行勾选某行数据时，该操作将向后端发送请求，请求成功则该行数据所对应的的勾选框状态为勾选且禁用

难点及坑：axios请求后端数据成功时，初始化表格的时候，使用el-table的toggleRowSelection()方法设置勾选框状态一直设置失败

解决如下：

1、app.vue文件的部分代码如下

 <el-table 
   ref="table"
   :data="tableData"
   stripe
   border
   @select="selectSingle"           <!--单独勾选某行数据的勾选框-->
   @select-all="selectAll"          <!--勾选头部勾选框，进行全选或者全不选-->
 >
  <el-table-column
    type="selection"
    fixed
    width="50"
    align="center"
    :selectable="selectable"         <!--设置禁用或非禁用状态-->
  >
  <el-table-column
   v-for="(item,index) in tableHeader"
   :key="index"
   :width="item.width"
   :label="item.label"
   align
   show-overflow-tooltip
  >
     <template slot-scope="scope">
       <template v-if="item.label==="盘符">
         <span>{{scope.row.name}}</span>
       </template>
       <template v-if="item.label === '硬盘总容量'">
         <span>{{ scope.row.romTotal }}GB</span>
       </template>
     <template>
  </el-table-column>
 </el-table>
 
 export default {
    name:'app',
    data(){
      return {
        tableData:[],//  表格数据
        tableHeader:[ //表格头部
          {
            label: '盘符',
            width: '150',
          },
          {
            label: '硬盘总容量',
            width: '150',
          }
        ],
      }
    },
    
    methods:{
       //一、获取列表数据
       storageList(){
         serviceApi.storageList({}).then(res => {
           if(res.data.successFlg && res.data.data){
             //1、获取列表数据，存入tableData
             this.tableData = res.data.data ? res.data.data : [];
             //2、筛选出remark为“1”的数据，该数据勾选状态需要设置为勾选且禁用
             if(this.tableData.length > 0){
               let checkedData = this.tableData.filter((item) => {
                 return item.remark === '1';
               });
               let $this = this;
               //3、一定要使用this.$nextTick()，等数据都渲染到表格中再设置勾选状态，否则直接使用$this.$refs.table.toggleRowSelection(item);没有效果
               this.$nextTick(() => {
                 if(checkedData.length > 0){
                   checkedData.forEach((item) => {
                    //toggleRowSelection(row, selected)方法接受两个参数，row传递被勾选行的数据，selected设置是否选中
                     $this.$refs.table.toggleRowSelection(item，true);
                   });
                 }
               });
             }
           }
         }).catch(err => {
           console.error(err);
         });
       },
       
       //二、单独勾选表格中某条数据所对应的勾选框
       selectSingle(selection,row){
         let data = {
           remark:'1',
           id:row.id
         };
         serviceApi.saveMediaStorageSpace(data).then(res => {
           if(res.data.successFlg && res.data.data){
             this.$message.success('成功');
             this.storageList();//列表数据刷新
           }else{
             this.$message.error('失败');
           }
         }).catch(err => {
           console.error(err);
         });
       },
       //三、勾选头部的勾选框，进行全选
       selectAll(selection){
         if(selection.length > 0){//length>0表示全选，length=0为全不选
           selection.forEach((item) => {
             let data = {
               remark:1,
               id:item.id
             };
             serviceApi.saveMediaStorageSpace(data).then(res => {
               if(res.data.successFlg && res.data.data){
                 this.$message.success('成功');
                 this.storageList();//列表数据刷新
               }else{
                 this.$message.error('失败');
               }
             }).catch(err => {
               console.error(err);
             });
           });
         }
       },
       //四、设置表格中勾选框是否是禁用状态
       selectable(row,index){
         if(row.remark === '1'){
           return false;//禁用状态
         }else{
           return true;//非禁用状态
         }
       },
    }
 }

总结：

1、如果是表格中一开始没有数据，需要通过请求接口获取数据或者从其他途径获取数据的话，
那么一定要记得再获取完数据之后使用this.$nextTick()，在this.$nextTick()的回调中使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态
2、如果是静态数据的话，则可以直接使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态，例如：

export default {
    name:'app',
    data(){
      return {
        tableData:[
          {
            name:'c',
            romTotal:22
          },
          {
            name:'d',
            romTotal:11
          },
          {
            name:'f',
            romTotal:33
          }       
        ],//  表格数据
        tableHeader:[ //表格头部
          {
            label: '盘符',
            width: '150',
          },
          {
            label: '硬盘总容量',
            width: '150',
          }
        ],
      }
    },
    mounted(){
      this.$refs.table.toggleRowSelection(tableData[0],true);
    }
}