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