vue+element UI实现树形表格带复选框实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue+element UI实现树形表格带复选框实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3973字，纯文字阅读大概需要6分钟。

内容图文

使用的技术为element-ui，在此基础上，为每一行加上复选框

本次所实现的代码。

<template>
  <div class="app-container">
    <div class="role-cont clearfix">
      <!-- 全选框 -->
      <el-checkbox class="check-page-all" v-model="checkPageAll" @change="checkPageAllEv($event)"></el-checkbox>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        ref="multipleTable"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <!-- 每一行选择框 -->
        <el-table-column type="selection" width="55">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" @change="pageCheckEv(scope)"></el-checkbox>
          </template>
        </el-table-column>

        <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkPageAll: false,
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              p_id: 3,
              id: 31,
              date: "2016-05-01",
              name: "王小虎",
              checked: false,
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
              p_id: 3,
              id: 32,
              date: "2016-05-01",
              name: "王小虎",
              checked: false,
              address: "上海市普陀区金沙江路 1519 弄"
            }
          ]
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      multipleSelection: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 全选事件
    checkPageAllEv(item) {
      // console.log(this.multipleSelection)
      let checkAll = (data, checked) => {
        for (let x of data) {
          x.checked = checked;
          if (x.children) {
            checkAll(x.children, checked);
          }
        }
      };
      if (item === true) {
        checkAll(this.tableData, true);
      } else {
        checkAll(this.tableData, false);
      }
    },
    // 遍历json数据
    isCheckAllEv(data) {
      let isCheckAll = true;
      let fn = data => {
        for (let x of data) {
          if (x.checked === false) {
            isCheckAll = false;
            return isCheckAll;
          }
          if (x.children) {
            fn(x.children);
          }
        }
      };
      fn(data);
      console.log(isCheckAll);
      return isCheckAll;
    },
    // 查找父级函数
    getParent(data2, nodeId2) {
      var arrRes = [];
      if (data2.length === 0) {
        if (nodeId2) {
          arrRes.push(data2);
        }
        return arrRes;
      }
      let rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          let node = data[i];
          if (nodeId === data[i].id) {
            arrRes.push(node);
            rev(data2, node.p_id);
            break;
          } else {
            if (node.children) {
              rev(node.children, nodeId);
            }
          }
        }
        return arrRes;
      };
      arrRes = rev(data2, nodeId2);
      return arrRes;
    },
    // 子选框事件
    pageCheckEv(scope) {
      console.log(scope.row);
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.children) {
        this.handleCheckAll(scope.row, scope.row.checked);
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        // 判断父级是否有子元素
         console.log(item);
        if (!item.children) {
          item.checked = scope.row.checked;
        } else {
          var num = 0;
          item.children.forEach((item, i) => {
            // 判断子元素的checked是否为true, 并记录选中的数量
            if (item.checked === true) {
              num += 1;
            }
          });
          // 判断子元素的checked 是否全部 为true(true是选中) 如果是全部选中，那么将父元素的checked状态改成true，否则为false
          if (num === item.children.length) {
            item.checked = true;
          } else {
            item.checked = false;
          }
        }
      });

      // 是否所有子项都已经勾选
      if (this.isCheckAllEv(this.tableData) === true) {
        this.checkPageAll = true;
      } else {
        this.checkPageAll = false;
      }
    },
    // 将子元素的状态 改成和父元素的状态一样
    handleCheckAll(row, checked) {
      row.checked = checked;
      if (row.children) {
        let that = this;
        row.children.forEach((element, i) => {
          that.handleCheckAll(row.children[i], checked);
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.role-cont {
  position: relative;
  font-size: 16px;
  color: #333333;
  line-height: 40px;
}
.check-page-all {
  position: absolute;
  top: 14px;
  left: 11px;
  z-index: 99;
}
</style>

 

当选中所有子节点时，父节点也被选中，，和取消一个被全选的子节点，父节点也取消选中

 

内容总结

以上是互联网集市为您收集整理的vue+element UI实现树形表格带复选框实例全部内容，希望文章能够帮你解决vue+element UI实现树形表格带复选框实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---