Antd a-tree 树形控件，选中的节点高亮。

最新推荐文章于 2025-04-11 19:00:00 发布

不爱吃饭爱吃菜

最新推荐文章于 2025-04-11 19:00:00 发布

阅读量2.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45288172/article/details/129063862

版权

该文章展示了如何在Vue应用中创建一个树形列表，用于显示设备信息。通过<a-tree>组件，结合data和methods，实现了默认展开所有节点、节点选择时标题颜色变化以及根据设备状态显示不同颜色的功能。设备的属性如名称、状态和ID都在节点标题中动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现最简单的树展示列表
效果图：
在这里插入图片描述


template中：

	<a-tree
        :tree-data="deviceList"
        :defaultExpandAll="defaultExpandAll"   //默认展开所有
        :replaceFields="replaceFields"  //替换treeNode中title,key,children字段为deviceList中对应的字段
        @select="onTitleSelect"  //点击树节点触发
      >
        <!-- ⚠️重点这这里⚠️ -->
        <template #title="{ equipmentName, deviceState, deviceType, deviceId }">  //title中的值为deviceList中有的值
          <div :class="activeItem.key == deviceId ? 'color-active' : ''">   //点击的树节点字体高亮
              <span
                class="title_circle"  //默认的class样式
                :class="
                  deviceState == 1  //不同数据展示不同的class样式
                    ? 'color_green'
                    : deviceState == 2
                    ? 'color_red'
                    : deviceState == 3
                    ? 'color_gray'
                    : ''
                "
              ></span>
            {{ equipmentName }}  //节点名称
          </div>
        </template>
      </a-tree>



script中：

data(){
	return {
		deviceList: [],
		defaultExpandAll: true,  //为true默认展开所有
	    replaceFields: {   //替换treeNode中title,key,children字段为deviceList中对应的字段
	        title: "equipmentName",
	        key: "deviceId",
	      },
	}
},
methods: {
	// 变更数上标题的颜色
    onTitleSelect(selectedKeys, item) {
      this.activeItem = item.selectedNodes[0];
    },
}