vue+element ui实现树形表格加复选框（checkbox）

最新推荐文章于 2024-08-20 09:45:52 发布

置顶

BSCIO_599

最新推荐文章于 2024-08-20 09:45:52 发布

阅读量4.3k

点赞数 5

文章标签： javascript elementui vue.js

本文链接：https://blog.csdn.net/weixin_40581358/article/details/114536527

版权

本文介绍了如何在Vue项目中结合Element UI库，实现一个带有复选框的树形表格功能。内容包括全选、单选和多选的实现方法，并展示了最终效果。作者分享了自己的解决方案，并欢迎大家交流更好的实现方式。

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

element ui中有带复选框的表格和树形数据的表格，不过呢，wo遇到一个新的需求，其中就是要实现树形表格和复选框的结合，尝试过很多方法，最后自己总结出一套，实现了全选，单选，多选。

效果图：
在这里插入图片描述
代码部分

 <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        row-key="domainId"
        :default-expand-all="true"
        :tree-props="{
   
          hasChildren: 'hasChildren',
          children: 'domainInfoLists',
        }"
      >
        <el-table-column width="105">
          <template slot="header" slot-scope="scope">
            <el-checkbox
              v-model="checkouts"
              style="padding-left: 10px"
              @change="checkAllIn(scope)"
            />
          </template>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.checks"
              style="padding-left: 10px"
              @change="checkChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableList"
          :key="index + 'a'"
          :label="item.label"
          :prop=