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

缺乏、安全感 2023-10-03 11:06 13阅读 0赞

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

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

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

<template>
      <div class="app-container">
    
        
        <el-table v-loading="loading" :data="userList"> 
          //勾选框
          
    
          <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);
        }
    }