vue 中如何同时让多个 table 切换选中状态

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 2127 天前的主题，其中的信息可能已经有所发展或是发生改变。

目前想要实现的功能是在页面加载完多个表格之后，将这几个表格全部默认全选。现在在每个 table 中都有设置好 ref

          <el-col :span="7">
            <el-card :body-style="{ padding: '0px' }">
              <el-table ref="cmpt_vip_table" :data="cmpt_case_data.AdVIPCase" :max-height=600
                        @selection-change="AdSelectionChange">
                <el-table-column type="selection" label="选择">
                </el-table-column>
                <el-table-column label="AdVIPCase" prop="case_name">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>

          <el-col :span="7">
            <el-card :body-style="{ padding: '0px' }">
              <el-table ref="cmpt_carousel_table" :data="cmpt_case_data.CarouselCase" :max-height=600
                        @selection-change="VipSelectionChange">
                <el-table-column type="selection" label="选择">
                </el-table-column>
                <el-table-column label="CarouselCase" prop="case_name">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>

然后再 created()中实现默认全选的逻辑

    created() {
      this.$axios.get(this.get_regression_case_url)
        .then(response => {
          this.regression_case_data = response.data;
          this.$refs.sup_table.toggleAllSelection();
          this.$refs.ad_table.toggleAllSelection();
          this.$refs.vip_table.toggleAllSelection();
          this.$refs.carousel_table.toggleAllSelection();
          this.$refs.vod_table.toggleAllSelection();
        })
        .catch(e => {
          this.errors.push(e)
        });
    },

但是实际上不能全部表格都全选，只有最后一个"vod_table"生效，且每次都是最后一个生效(有全选)