首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vue.js
Alerta
V2EX  ›  Vue.js

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

  •  
  •   Alerta · 2019-01-28 19:59:16 +08:00 · 3092 次点击
    这是一个创建于 492 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前想要实现的功能是在页面加载完多个表格之后,将这几个表格全部默认全选。现在在每个 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"生效,且每次都是最后一个生效(有全选)

    4 条回复    2019-01-29 17:43:16 +08:00
    Alerta
        1
    Alerta   2019-01-28 19:59:38 +08:00
    求助各位 vue 大佬,求助求助
    Alerta
        2
    Alerta   2019-01-28 21:13:48 +08:00
    DING
    Alerta
        3
    Alerta   2019-01-29 13:52:25 +08:00
    顶一顶,希望有大佬看到
    ghostheaven
        4
    ghostheaven   2019-01-29 17:43:16 +08:00 via Android
    $nextTick 里跑 toggleAllSelection 试一下
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4892 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 02:09 · PVG 10:09 · LAX 19:09 · JFK 22:09
    ♥ Do have faith in what you're doing.