树形表格demo

<template>
  <el-card class="tree-card" shadow="never">
    <div v-loading="loading">
      <div class="tree-head">
        <!-- <div class="tree-head-check">
          <el-checkbox v-model="checkAll" @change="onCheckAllChange"></el-checkbox>
        </div>-->
        <div style="flex: 1;display: flex;">
          <div class="tree-head-one">ID</div>
          <div class="tree-head-one">CL Name (CN)</div>
          <div class="tree-head-one">CL Short Name (CN)</div>
          <div class="tree-head-one">CL Code</div>
          <div class="tree-head-one">BU</div>
          <div class="tree-head-one">Product Group</div>
          <div class="tree-head-one">Product</div>
          <div class="tree-head-one">Interest Rate Type</div>
          <div class="tree-head-one">Limit Amount</div>
          <div class="tree-head-one">Used Amount</div>
          <div class="tree-head-one">Available Amount</div>
          <div class="tree-head-one">Use Parent Limit</div>
          <div class="tree-head-one">Currency</div>
          <div class="tree-head-one">Remark</div>
          <div class="tree-head-one">Status</div>
          <div class="tree-head-one">CL Name (EN)</div>
          <div class="tree-head-one">CL Short Name (EN)</div>
          <div class="tree-head-one">Version</div>
          <div class="tree-head-one">InsertTime</div>
          <div class="tree-head-one">CreateBy</div>
          <div class="tree-head-one">UpdateBy</div>
          <div class="tree-head-one">LastUpdateTime</div>
          <div class="tree-head-one">操作</div>
        </div>
      </div>
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        ref="treeTable"
        :expand-on-click-node="false"
      >
        <span class="tree-custom-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>{{ data.label1 }}</span>
          <span>{{ data.label2 }}</span>
          <span type="text" size="mini">
            <el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </el-card>

</template>

<script>
let id = 1000;
export default {
  name: "tree",
  data() {
    return {
      checkAll: false,
      loading: false,
      treeData: []
      // treeDefaultProps: {
      //   children: "children",
      //   label: "label"
      // },
      // treeSelArr: [],
      // treeLength: 0
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    append(data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    remove(node, data) {
      debugger;
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      );
    },
    // 初始化树的长度
    // initTreeLengh(arr) {
    //   let count = 0;
    //   arr.map(item => {
    //     if (item.children) {
    //       count += item.children.length;
    //     }
    //   });
    //   this.treeLength = count + arr.length;
    // },
    // 全选改变时
    // onCheckAllChange() {
    //   if (this.checkAll) {
    //     this.$refs.treeTable.setCheckedNodes(this.treeData);
    //   } else {
    //     this.$refs.treeTable.setCheckedKeys([]);
    //   }
    // },
    // 节点选中状态发生变化时的回调
    // onCheckTree() {
    //   this.treeSelArr = [];
    //   this.treeSelArr = this.$refs.treeTable.getCheckedNodes();
    //   this.treeSelArr.length == this.treeLength
    //     ? (this.checkAll = true)
    //     : (this.checkAll = false);
    // },
    // 选择元素按钮
    // onSelect() {
    //   let treeArr = this.$refs.treeTable.getCheckedNodes();
    //   if (treeArr.length <= 0) {
    //     this.$message.warning("请选择元素");
    //     return;
    //   } else {
    //     console.log(this.$refs.treeTable.getCheckedNodes());
    //   }
    // },
    // 获取数据
    getTreeData() {
      this.treeData = [
        {
          id: 1,
          label: "12987121",
          label1: "好滋好味鸡蛋仔",
          label2: "荷兰优质淡奶，奶香浓而不腻",
          children: [
            {
              id: 11,
              label: "一级 1-1"
            },
            {
              id: 12,
              label: "一级 1-2"
            }
          ]
        },
        {
          id: 2,
          label: "12987122",
          label1: "好滋好味鸡蛋仔",
          label2: "荷兰优质淡奶，奶香浓而不腻",
          children: [
            {
              id: 21,
              label: "二级 2-1",
              isShow: false
            },
            {
              id: 22,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "12987123",
          label1: "好滋好味鸡蛋仔",
          label2: "荷兰优质淡奶，奶香浓而不腻",
          children: [
            {
              id: 31,
              label: "二级 3-1"
            },
            {
              id: 32,
              label: "二级 3-2"
            },
            {
              id: 33,
              label: "二级 3-3"
            }
          ]
        }
      ];
      // this.treeData = JSON.stringify(this.treeData)
      //   this.initTreeLengh(this.treeData);
    }
  }
};
</script>

<style>
/*处理css, 使用 scss, 加上 scoped*/
.tree-card {
  height: 100%;
  background-color: #ffffff;
  padding: 27px 23px;
}
.tree-card .el-card__body {
  padding: 0;
}
.tree-head {
  background-color: #f8f8f8;
  line-height: 40px;
  height: 40px;
  border: 1px solid #dcdee3;
  border-bottom: none;
  display: flex;
  font-size: 14px;
  color: #606266;
  padding-right: 8px;
}
.tree-head-check {
  width: 38px;
  text-align: right;
}
.tree-head-one,
.tree-head-two,
.tree-head-three {
  flex: 1;
}
.tree-head-one {
  padding-left: 8px;
}
.tree-custom-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree {
  overflow: hidden;
}
.el-tree .el-tree-node {
  border: 1px solid #dcdee3;
  border-bottom: none;
}
.el-tree {
  border-bottom: 1px solid #dcdee3;
}
.el-tree-node__children .el-tree-node {
  border: none;
}
.el-tree-node__content {
  line-height: 40px !important;
  height: 40px !important;
}
.el-tree-node__children .el-tree-node__content {
  border-top: 1px solid #dcdee3;
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: #ffffff !important;
}
</style>