vue element中tree自定义内容

前言

这篇文章用到的是element中的tree，需求是它的节点上不止只有一个标题，还要有别的。这个在文档里面是有的，但是文档上写的有点复杂，可能会触及了有些小伙伴的知识盲区，所以在这里，我为大家梳理了最简单的代码，直接copy就可以了

最终效果

上代码

<template>
  <div>
    <el-tree
      :data="data"
      :props="defaultProps"
      accordion
      @node-click="nodeclick"
      @node-expand="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node,data }">
        <span>{{ node.label }}</span>
        <span>
          {{data.time}}
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          label: "重要客户",
          children: [
            {
              label: "杨先生",
              time:'2020/5/30',
              id: 1
            }
          ]
        },
        {
          label: "即将超时客户",
          children: [
            {
              label: "乔先生",
              time:'2020/5/30',
              id: 2
            },
            {
              label: "马先生",
              time:'2020/5/30',
              id: 3
            }
          ]
        },
        {
          label: "全部客户",
          children: [
            {
              label: "乔先生",
              time:'2020/5/30',
              id: 4
            },
            {
              label: "马先生",
              time:'2020/5/30',
              id: 5
            },
            {
              label: "杨先生",
              time:'2020/5/30',
              id: 6
            },
            {
              label: "张女士",
              time:'2020/5/30',
              id: 7
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data.children);
    },
    nodeclick(data) {
      console.log(data.id);
    }
  }
};
</script>
<style scoped>
::v-deep .el-tree-node__label {
  font-size: 20px;
}
::v-deep .el-tree-node__content {
  height: 40px;
}
</style>

结语

直接复制就可以用，这篇文章对你有帮助的话，记得点赞哦！