vue+element 表格中全选与清除选中

效果图

开关代码

            <el-switch
              :disabled="radio==1 || radio==2"
              v-model="oppStationpower"
              active-text="电站反选"
              @change="checkAnti"
            ></el-switch>

表格代码

          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            :data="StiontableData"
            height="400px"
            width="43%"
            class="customer-no-border-table"
            :row-class-name="tableRowClassName"
            :header-cell-style="{background:'#E7F2FD',color:'#252525'}"
            style="width: 374px; border-top:1px solid #409EFF"
            border
          >
            <el-table-column type="selection" v-if="!radio"></el-table-column>
            <div slot="empty" style="margin-left:-10%">
              <img src="@/assets/no-content.png" style="width:297px;height:210px;margin-top:80px;" />
              <div style="font-size:16px;color:#666666;margin-bottom:80px;margin-top:-80px;margin-left:70px">暂无数据</div>
            </div>
            <el-table-column label="序号" type="index" align="center" ></el-table-column>
            <el-table-column
              v-for="(item,index) in columns"
              :width="item.width"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :formatter="item.formatter"
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
          </el-table>

js部分

    //反选
    checkAnti() {
      let rows = this.StiontableData;
      console.log(rows);
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
        console.log(rows);
      } else {
        this.$refs.multipleTable.clearSelection();
        console.log(rows);
      }
    },