elementUI中table表格添加一列多选框（vue）

梦里梦外; 2022-11-26 08:56 1426阅读 0赞

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]在elementUI中使用多选框checkbox在表格中有两种方法，第一种就像上图中第一列多选框一样，只需在elementUI中table的一列设置一个属性type="selection"即可，如下：

<el-table
       :data="tableData"
       :current-page.sync="currentPage"
       @selection-change="handleSelectionChange"
       style="width: 100%;" class="" ref="taskTable">
       <el-table-column
           type="selection"
           width="55">
       </el-table-column>
    </el-table>

但是单独的一列多选框需要和这列多选框进行区分，所以需要单独设置如下：

<el-table-column width="55" label="是否删除" >
       <template slot-scope="scope">
           <el-checkbox v-model="tableData[scope.$index].isDelete"   @change="selectRadio(scope.$index,scope.row)" :disabled="tableData[scope.$index].disabled"></el-checkbox>
       </template>
    </el-table-column>

也就是上图红色框的范围区域多选框，因为是和vue一起写的，所以适应v-model进行绑定，数据和多选框勾选方法展示如下：

data(){
        return:{
            tableData:[]
        }
    },
    method:(){
        //多选框选中方法
        selectRadio(index,row){
                    
        },
        //获取数据的方法
        getData () {
           axios.post('/admin/decops/getTasks', {
              currentPage:this.currentPage,
              pagesize:this.pagesize,
              filter:this.formOne
           }).then(res => {
              this.tableData = res.data.tasks;
              this.formDataOne = res.data.selData;
              var Arr = this.tableData;
              this.getAdd(Arr);
              this.count = res.data.count;
           })
        },
        //给表格数据添加一列默认多选框的选中值数据
        getAdd(arr){
            var that = this;
            arr.forEach(function(item,index,array){
               that.$set(arr[index],'isDelete',false)
            });
            return arr
        },
    }

使用$set方法向接口返回的表格数据中添加一个属性isDelete，从而实现进行数组数据刷新，使得页面展示刷新。如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

但是这是有了一个问题，就是我点击第一列多选框选中的时候，修改是否删除这一列，第一列多选框框中的数据不会改变，为了防止数据传递错误，我想了一个方法，当选中第一列多选框的时候，使得是否删除这一列的多选框无法选中，实现方法如下：

// 第一列多选框选中事件
    handleSelectionChange(val) {
        this.multipleSelection = val;
        if(val.length == 0){
            this.updateDisable(this.tableData);
        }else{
            this.updateDisable(this.tableData,true);
        }
    },
    //是否禁用多选框
    updateDisable(Arr,type){
        var that = this;
        if(type){
            Arr.forEach(function(item,index,array){
                that.$set(Arr[index],'disabled',type)
            });
        }else{
            Arr.forEach(function(item,index,array){
                that.$set(Arr[index],'disabled',false)
            });
        }
        return Arr
    }

给表格数据每一列多选框增加一个disabled属性，通过第一列的勾选事件进行控制传递值type，从而进行控制是否删除这一列多选框是否禁用。

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: /images/20221124/21e7ea9410b7444b8e545d3dcd7c36b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221124/0ac59cbd3afc43059f1215c2f3d3bc02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2]: /images/20221124/24adea28b79f43eeaf600b64a18301ba.png