el-tree踩坑记

有一个需求是要给el-tree组件中的节点后面添加一个从后台获取的数据。
代码如下：

<el-col :span="6">

            <el-tree 

                  class="treeitems"

                  :data="depts"

                  node-key="code"

                  :props="defaultProps" 

                  :highlight-current="true"

                  

                  :default-expanded-keys="[0]"

                  auto-expand-parent

                  :expand-on-click-node = "false"

                  ref="tree"

              >

            </el-tree>

          </el-col>

defaultProps: {

          label: 'name',

          children: 'children',

 },

默认情况下，只显示name的值。

 

如果这样添加

<el-tree 

                  class="treeitems"

                  :data="depts"

                  node-key="code"

                  :props="defaultProps" 

                  :highlight-current="true"

                  

                  :default-expanded-keys="[0]"

                  auto-expand-parent

                  :expand-on-click-node = "false"

                  ref="tree"

              >

              <span class="custom-tree-node" slot-scope="{ node,data }">

                  <span>{{data.count}}</span>

              </span>

            </el-tree>
只显示data.count的值，就会把name的值给覆盖掉。

所以要完成需求，这样添加：

<el-tree 

                  class="treeitems"

                  :data="depts"

                  node-key="code"

                  :props="defaultProps" 

                  :highlight-current="true"

                  

                  :default-expanded-keys="[0]"

                  auto-expand-parent

                  :expand-on-click-node = "false"

                  ref="tree"

              >

              <span class="custom-tree-node" slot-scope="{ node,data }">

                   <span>{{node.label}}</span> 

                  <span>{{data.count}}</span>

              </span>

            </el-tree>
才可以满足需求！

defaultProps: {

          label: 'name',

          children: 'children',

        },

键值是label,children 不可变，label是要显示的值！