Vue项目-Element-UI el-tree样式修改

一、el-tree动态添加子节点

1、错误示例

        注意：数据添加成功，页面不会渲染

<template>
  <div class="template">
    <el-tree
        :data="treeData"
        :props="defaultProps"
        highlight-current
        default-expand-all
        node-key="value"
        @node-click="nodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      // ---------------------<<场景数据>>---------------------
      // 当前场景
      treeData: [
		{
			label:"测试数据1",
			value:1
		},
			{
			label:"测试数据2",
			value:2
		}
	  ],

      // 树节点属性
      defaultProps: {
        children: "children",
        value: "value",
        label: "label",
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // -----------------------<<请求>>----------------------
    // 更新场景结构树
    nodeClick(node) {
		if (!node.children){
			node.children = []
		}
	}
  },
};
</script>

<style lang="less" scoped>
.template{
	width:100%;
	height:100%;
}
</style>

2、正确示例

<template>
  <div class="template">
    <el-tree
        :data="treeData"
        :props="defaultProps"
        highlight-current
        default-expand-all
        node-key="value"
        @node-click="nodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      // ---------------------<<场景数据>>---------------------
      // 当前场景
      treeData: [
		{
			label:"测试数据1",
			value:1
		},
			{
			label:"测试数据2",
			value:2
		}
	  ],

      // 树节点属性
      defaultProps: {
        children: "children",
        value: "value",
        label: "label",
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // -----------------------<<请求>>----------------------
    // 更新场景结构树
    nodeClick(node) {
		if (!node.children){
			this.$set(node, "children", []);
		}
	}
  },
};
</script>

<style lang="less" scoped>
.template{
	width:100%;
	height:100%;
}
</style>

二、el-tree选中设置

1、选中、取消选中

<template>
  <div class="test">
    <div>
      <el-button @click="clickBtn(4)">选中1-1</el-button>
      <el-button @click="clickBtn(7)">选中2-2</el-button>
      <el-button @click="clickBtn(10)">选中3-3</el-button>
      <el-button @click="clickBtn(0)">取消选中</el-button>
    </div>

    <el-tree
      :data="listData"
      :props="defaultProps"
      :check-strictly="true"
      highlight-current
      default-expand-all
      :expand-on-click-node="false"
      node-key="id"
      ref="Tree"
      @node-click="clickNode">
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      listData: [
        {
          id: 1,
          label: "一级",
          children: [
            {
              id: 4,
              label: "1-1",
            },
            {
              id: 5,
              label: "1-2",
            },
            {
              id: 6,
              label: "1-3",
            },
          ],
        },
        {
          id: 2,
          label: "二级",
          children: [
            {
              id: 7,
              label: "2-1",
            },
            {
              id: 8,
              label: "2-2",
            },
            {
              id: 9,
              label: "2-3",
            },
          ],
        },
        {
          id: 3,
          label: "三级",
          children: [
            {
              id: 10,
              label: "3-1",
            },
            {
              id: 11,
              label: "3-2",
            },
            {
              id: 12,
              label: "3-3",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        value: "id",
        label: "label",
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    clickNode(node) {
      // console.log(node);
    },

    clickBtn(id) {
      if (id === 0) {
        // 获取当前选中的key
        let currentKey = this.$refs.Tree.getCurrentKey();

        // 根据ID获取节点
        let node = this.$refs.Tree.getNode(currentKey);

        // 取消选中false为取消选中，true为选中
        node.isCurrent = false;
      } else {
        // 设置当前选中key
        this.$refs.Tree.setCurrentKey(id);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.test {
  width: 100%;
  height: 100vh;

  /deep/ .el-button {
    color: #000;
  }

  /deep/ .el-tree {
    color: #000 !important;
  }
}
</style>