a-tree 自定义标签

最新推荐文章于 2024-05-17 17:08:16 发布

我有一双水银鞋

最新推荐文章于 2024-05-17 17:08:16 发布

阅读量187

点赞数

文章标签： java 服务器前端 anti-design-vue

本文链接：https://blog.csdn.net/lldhhs4554/article/details/134265691

版权

1.HTML

        <a-tree
          show-icon
          :defaultSelectedKeys="[selectedKeys]"
          v-if="leftMenuList.length > 0"
          :defaultExpandAll="true"
          :defaultExpandParent="true"
          @select="onSelect"
          :checkStrictly="true"
          :tree-data="leftMenuList"
          :replaceFields="{ children: 'children', title: 'label', key: 'Id' }"
        >
          <template slot="city">
            <img src="@/assets/images/admin/header/city.png" alt="" />
          </template>
          <template slot="liucheng">
            <img src="@/assets/images/admin/header/liucheng.png" alt="" />
          </template>
        </a-tree>

2.方法

    async heatnetworkQueryTree() {  //连接接口
      const res = await this.$api.heatnetworkQueryTree();
      if (res.success) {
        this.leftMenuList = res.response.children;
        this.FirstNetwork(res.response); //传值
      }
    },
    FirstNetwork(list) {
      if (list.children.length > 0) {
        for (var i = 0; i < list.children.length; i++) {
          // 顶级 判断条件
          if (list.children[i].type == 0 && list.children[i].Pid == 0) {
            list.children[i].slots = { icon: "city" };
            this.FirstNetwork(list.children[i]);
          } else if (list.children[i].type == 0 && list.children[i].Pid != 0) {
            list.children[i].slots = { icon: "liucheng" };
            this.FirstNetwork(list.children[i]);
          }
        }
      }
      return list;
    },