关于el-tree中label的function模式

以element这份代码为例，说一下主要需要改哪些地方（找了挺多地方，讲的看着都懵，也可能是我资质有限，懵了一早上才整出来）

PS：1.render-content直接放弃了   2.代码就直接以element中，图中画框的那一份为例，直接可以去复制

 

……想了许久不会动笔，直接粘代码，告诉改哪里了_(:з」∠)_

---

defaultProps相当于个解析的吧，把data里面每个node节点解析一遍

 

---

 

下面是代码，主要看看注释，或直接新建个vue页面，代码复制进去看好看点。

<template>
    <div id="gantt">
        <el-tree
        :data="data"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <!-- 我是A处啦~~~ -->
                <span>{{ node.label.first }}---</span>
                <span>{{ node.label.second }}---</span>
                <!-- node中的level，当前点击层级，也和我需求有关 -->
                <span v-show="node.level < 4">
                <el-button
                    type="text"
                    size="mini"
                    @click="() => append(data,node)">
                    Append
                </el-button>
                </span>
            </span>
        </el-tree>
    </div>
</template>

<script>
let id = 1000;
// 这里i我是为了看看label函数运行了几次，检测结果就是……每个函数比预想的多运行了1次，也就是data的id数*2，翻了一倍
let i=0;
export default {
    name:'gantt',
    data() {
      const data = [
        {
          id: 1,
          aaa: '一级 1',
          bbb:'猜猜我是第几个',
          children: [
            {
              id: 4,
              aaa: '二级 1-1',
              bbb:'猜猜我是第几个',
              children: [
                {
                  id: 9,
                  aaa: '三级 1-1-1',
                  bbb:'猜猜我是第几个',
                }, {
                  id: 10,
                  aaa: '三级 1-1-2',
                  bbb:'猜猜我是第几个',
                }
              ]
            }
          ]
        }, 
        {
          id: 2,
          aaa: '一级 2',
          bbb:'猜猜我是第几个',
          children: [{
            id: 5,
            aaa: '二级 2-1',
            bbb:'猜猜我是第几个',
          }, {
            id: 6,
            aaa: '二级 2-2',
            bbb:'猜猜我是第几个',
          }]
        }, 
        {
          id: 3,
          aaa: '一级 3',
          bbb:'猜猜我是第几个',
          children: [
            {
              id: 7,
              aaa: '二级 3-1',
              bbb:'猜猜我是第几个',
            }, {
              id: 8,
              aaa: '二级 3-2',
              bbb:'猜猜我是第几个',
            }
          ]
        }
      ];
      return {
        defaultProps:{
          // 这个是往下找children的，这个children就不用动了，不过可以试试，效果就是找不到data下的子节点
          children:'children',
          // props绑定这个
          // a：data   b：node
          // 自己脑子里把下面的 a 和 b 转义一下，就明白了
          label(a,b){
            // console.log(i++)
            // console.log('label:','data:',a,'node:',b)
            // 参考文章返回的格式直接变成了字符串
            // 因为我这里需求需要，只能返回个对象，可以参考html，A处，方便自定义一行的样式
            // 返回结果就是node中的label值，我这里是个对象
            return {
              first:a.aaa,
              second:a.bbb,
            }
          },
        },
        data: JSON.parse(JSON.stringify(data)),
      }
    },
    methods: {
      // 添加
      append(data,node) {
          const newChild = { 
            id: id++, 
            // 这里添加，添加的是添加到data中了，解析按照的defaultProps解析
            aaa:'ccc',
            bbb:'ddd',
            children: [] };
          if (!data.children) {
              this.$set(data, 'children', []);
          }
          data.children.push(newChild);
      },
    }
}
</script>

<style lang="scss" scoped>
#gantt{
    width: 100%;
    height: 100%;
}
// 这里是改头部icon的，不过el是只用了一个icon，通过旋转+过渡实现那个效果
/deep/.el-icon-caret-right::before{
    content:"\e791"
}
</style>

 

借鉴文章：https://blog.csdn.net/weixin_42371145/article/details/90371698