web前端-Vue element UI中的el-table勾选框 展示隐藏；设置默认勾选禁用

Posted 2021-12-29 MinggeQingchun

1、el-table如果我们想新增一个勾选框，在  .vue文件中

<el-table-column type="selection" width="55" align="center" />

如果不需要加这个勾选框，直接不写上面那行代码即可 

<template>
  <div class="app-container">

    <!--@selection-change="handleSelectionChange"> table的选择项改变触发事件 -->
    <el-table v-loading="loading" :data="userList"> <!--@selection-change="handleSelectionChange">-->
      //勾选框
      <!--<el-table-column type="selection" width="55" align="center" />-->

      <el-table-column label="用户名" align="center" prop="user.userNameCn" />

      <el-table-column label="时间" align="center" prop="begintime" width="180">
        <template slot-scope="scope">
          <span> parseTime(scope.row.begintime, 'y-m-d HH:mm:ss') </span>
        </template>
      </el-table-column>

  </div>
</template>

2、设置勾选框默认勾选、禁用

 <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>

单选，全选事件响应

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()，在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: '表头1',
            width: '150',
          ,
          
            label: '表头2',
            width: '150',
          
        ],
      
    ,
    mounted()
      this.$refs.table.toggleRowSelection(tableData[0],true);