elementUI的樹形tree組件的使用

在模板中使用el-tree標簽 給data屬性綁定樹形結構數據即可

<el-tree :data="treeData"></el-tree>

接着在data中編寫數據

treeData: [
        {
          label: "java",
          children: []
        },
        {
          label: "web",
          children: [
            {
              label: "js",
              children: []
            },
            {
              label: "html",
              children: []
            },
            {
              label: "css",
              children: []
            }
          ]
        },
        {
          label: "python",
          children: []
        }
      ]

以上是elementui樹形組件的基礎使用方法。

注：elementui的樹形組件默認是以label字段作為名稱顯示的，如果根據后端返回的數據來渲染樹組件，字段有可能不是label。那么樹形組件就不會顯示文字。這時候需要樹組件的props屬性來進行映射

  

比如返回的名稱是shopName，我們可以在data中定義一個對象。

customProps:{
        label:'shopnName',
        children:'children'
      }

然后綁定到樹形組件的props屬性里即可

<el-tree :props="customProps" :data="treeData"></el-tree>