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是要顯示的值！