Vue-----table 控件自动勾选全选框

最新推荐文章于 2024-07-30 16:26:17 发布

企鹅要去银河思考人生！！！

最新推荐文章于 2024-07-30 16:26:17 发布

阅读量6.5k

点赞数

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44663188/article/details/123194246

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue.js中使用el-table组件动态加载数据，并实现选择框的双向绑定。通过设置ref属性和使用$refs进行交互，结合getEffectByToken()方法获取数据，然后在切换选择时利用toggle方法处理逻辑，实现表格数据的默认勾选状态。

摘要由CSDN通过智能技术生成

      <el-table :data="projectEffect" ref="multipleSelectionsssss" stripe style="width: 100%"    @selection-change="handleSelectionChange"   :row-key="getRowKeys">>
        <el-table-column   label="配置"   type="selection" :reserve-selection="true">
        </el-table-column> 
      </el-table>

最重要的是加上 ref="multipleSelection"

//获取勾选的动态数据
    getEffectByProjectId(){
      getEffectByToken().then((res)=>{
        switch (res.code) {
          case '0000':
            
            this.multipleSelection=res.data.result;
            
            //设置表格默认勾选
            this.$nextTick(function() {
              // this.multipleSelection是需要勾选的数据
              this.toggle( this.multipleSelection);   //建议包装成方法这样扩展性更强
            })
            
            break
            
          case '1111':
            showMessage('warning', 'zzzzz')
            break
        }

      })
    },

  //双向绑定table选择框
    toggle (arr) {
     .....   //逻辑代码
     arr.forEach(item => {
         if(...) {  //这里可以放置自己的逻辑diamante
          this.$refs.multipleSelectionsssss.toggleRowSelection(item,true);
         }
      });
    },