一、:props="方法"——告别死数据
<el-tree :data="data" :props="defaultProps"></el-tree>
<script>
export default {
data() {
return {
data:[]
},
methods: {
}
};
</script>
1、向服务器获取动态数据,一般结构为一个包含若干个对象的数组,如:
[
a:1,
b:2,
c:3,
d:[{
a:1,
b:2,
c:3,
d:[{
......
}]
}]
]
2、而我们要显示在页面上只有同级众多数据中的一个,那么怎么判断我们要显示的内容呢?
:props可以帮我们判断,那个key值要显示的内特——label,哪个key值对应的是往下遍历的children。
树形控件中放入props这个API,前面再加冒号,动态绑定一个属性:
:props="defaultProps"
再在model,也就是script标签下写入:
data(){
return
{
defaultProps: { children: 'd', label: 'a' }
//这样d就是children,a就是显示子啊页面的label
}}
二、 :render-content自定义树节点内容
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>);
}