树形控件el-tree

三水木雨

已于 2022-11-23 20:02:06 修改

阅读量800

点赞数

分类专栏： element ui 文章标签： vue.js 前端 elementui

于 2022-11-23 20:02:04 首次发布

本文链接：https://blog.csdn.net/qq_50276105/article/details/128006125

版权

element ui 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、: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>);
      }