以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