elementui 表格 批量操作

html

      <el-button size="medium" @click="handleHide">批量隐藏</el-button>
      <el-button size="medium" @click="handleShow">批量显示</el-button>
      <el-button size="medium"  @click="handleDelete">批量删除</el-button>
      <el-table ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%;margin-top: 20px;"
                @selection-change="handleSelectionChange">
            <el-table-column
                    label="状态"
                    width="140"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                   <span><i class="el-icon-view show_icon" :class="[scope.row.is_show=='0' ? 'show_icon' : 'hide_icon']"></i>{{scope.row.is_show | getIsShow(scope.row.is_show)}}</span>
                </template>
            </el-table-column>
        </el-table>

data数据

tableData:[{is_show:0}],
selectedData:[],//被选中的数据

判断显示隐藏过滤器

      filters:{
          getIsShow(key){
              let is_show = '';
              switch (key) {
                  case 0:
                      is_show = '显示';
                      break;
                  case 1:
                      is_show = '隐藏';
                      break;
              }
              return is_show
          }
        },

函数

            handleSelectionChange(val) {
                this.selectedData = val;
            },
            handleDelete(){//批量删除
                var val = this.selectedData;
                if(val) {
                    val.forEach((item,index) => {
                        this.tableData.forEach((val,idx) => {
                            if(item === val){
                                this.tableData.splice(idx,1);
                            }
                        })
                    })
                }
            },
            handleHide(){//批量隐藏
                var val = this.selectedData;
                if(val) {
                    val.forEach((item,index) => {
                        this.tableData.forEach((val,idx) => {
                            if(item === val && val.is_show === 0){
                                val.is_show = 1;
                            }
                        })
                    })
                }
                this.$refs.multipleTable.clearSelection();
            },
            handleShow(){//批量显示
                var val = this.selectedData;
                if(val) {
                    val.forEach((item,index) => {
                        this.tableData.forEach((val,idx) => {
                            if(item === val && val.is_show === 1){
                                val.is_show = 0;
                            }
                        })
                    })
                }
                this.$refs.multipleTable.clearSelection();
            },