Ant-tree ツリー コントロールでは、選択したノードが強調表示されます。

最も単純なツリー表示リストを実現します。
レンダリング図:

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];
    },
}