Element-plus UI框架el-Tree自定义图表爬坑

忘忧 2022年01月05日 705次浏览

Element-plus UI框架el-Tree自定义图标爬坑

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"  auto-expand-parent>
                <template v-slot:default="{data}" >
                  <div class="custom-node" v-if="data.children !== undefined">
                    <div class="row justify-between">
                      <div class="col-2">
                        <i class="iconfont">home</i>
                      </div>
                      <div class="col-9">
                        <span>{{data.label}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="custom-node" v-else>
                    <span>{{data.label}}</span>
                  </div>
                </template>
              </el-tree>