vue Table 表格绑定批量删除功能

1.    页面部分

<el-tooltip class="item" effect="dark" v-if="selectionList" content="将选中当前分页的所有数据，请确认后操作" placement="top-start">
       <el-button class="mr10" type="checkbox" :indeterminate="isIndeterminate"
             v-model="checkAll" @click="feedBatchSelect()">全部选择
        </el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" v-if="cancelSelectBtn" content="将取消当前页面的所选中数据" placement="top-start">
       <el-button class="mr10" type="primary" @click="toggleSelection()">取消选择
       </el-button>
</el-tooltip>
<el-button class="barBtn mr10" :disabled="selectionList" @click="batchDeletion">批量删除</el-button>
<div>
            <el-table
                    ref="multipleTable"
                    :data="allTableData"
                    :cell-style="{padding: '0'}"
                    :row-style="{height: '55px'}"
                    border
                    style="width: 100%"
                    @selection-change='selRow'>
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="foodTypeTitle"
                        label="饲料名称"
                        width="190">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="160">
                    <template slot-scope="scope">
                        <button @click="feedEdit(scope.$index, scope.row)" type="text"
                                class="el-button button--primary el-button--mini">编辑
                        </button>
                        <button @click="feedDel(scope.$index, scope.row)" type="text"
                                class="el-button button--danger el-button--mini">删除
                        </button>
                    </template>
                </el-table-column>
            </el-table>
</div>

2.  声明数据部分

data() {
      return {
          allTableData: [], //后台数据
          batchDeletionTid: [],  //获取的tid,用于删除时传给后台的id信息

          multipleTable: [], //表单ref
          selectionList: true, //全部批量删除状态
          cancelSelectBtn: false, //取消全选状态
          isIndeterminate: false,//控制不完整的全选状态
          checkAll: false,//控制全选状态
    }
},

3.  事件部分

//全选按键功能
feedBatchSelect() {
    this.cancelSelectBtn = true;
    this.selectionList = false;
    if (this.$refs.multipleTable.selection.length < this.allTableData.length) {
        this.checkAll = true;
    } else {
       this.checkAll = false;
    }
       this.$refs.multipleTable.toggleAllSelection();
},

//取消全部选择
toggleSelection() {
    this.cancelSelectBtn = false;
    this.selectionList = true;
    this.$refs.multipleTable.clearSelection();
},

//表格内触发的全选按钮状态变化
 selRow(val) {
     this.batchDeletionTid = []
     if (val.length < this.allTableData.length && val.length > 0) {
         this.isIndeterminate = true;
         this.selectionList = false;
         this.cancelSelectBtn = true;
     } else if (val.length == this.allTableData.length && val.length != 0) {
         this.isIndeterminate = false;
         this.cancelSelectBtn = true;
         this.selectionList = false;
         this.checkAll = true;
     } else if (val.length == 0) {
         this.isIndeterminate = false;
         this.cancelSelectBtn = false;
         this.selectionList = true;
         this.checkAll = false;
     }
     val.forEach((element) => {  //这里是存放把选中的数据获取的用于做删除时后台要的唯一ID
         this.batchDeletionTid.push(element.tid)
      });
      console.log(val)
     },

//批量删除
batchDeletion() {
     this.feedDel('', this.batchDeletionTid, 1) //这里执行自己的批量删除操作
},

4. 例