elementUI中table表格添加一列多选框（vue）-蒲公英云

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

梦里梦外; 2022-11-26 08:56 1510阅读 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
}