a-tree-select

ation_work

已于 2023-06-01 11:39:02 修改

阅读量507

点赞数

CC 4.0 BY-SA版权

分类专栏： vantd随笔文章标签： javascript

于 2023-05-31 10:46:27 首次发布

本文链接：https://blog.csdn.net/ation_work/article/details/130964251

vantd随笔专栏收录该内容

10 篇文章

订阅专栏

该文章展示了如何使用a-tree-select组件，并结合svg-icon来定制节点状态，根据变量title.status改变颜色和文字（在线/离线）。组件还支持自动展开父节点，并提供了加载数据的处理方法。

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

a-tree-select
 <template #title="title">
          <div>
            <svg-icon name="circle"
              :style="title.status===true?{color:'#06EB00'}:{color:'#808080'}">
            </svg-icon>
            <span class="labelText">
              {{title.label}}
              <span class="statusText">
                {{title.status===true?'在线':'离线'}}
              </span>
            </span>
          </div>
</template>

默认是plus-square，图标，自己按需改

            <a-tree
                :showLine="false"
                style="margin-left:17px"
                v-if="treeData1.length"
                :autoExpandParent="autoExpandParent"
                :defaultExpandedKeys=""
                :defaultSelectedKeys=""
                @select=""
                :treeData=""
                @load="treeloaded"
              >  <a-icon slot="switcherIcon" type="down"/>
            </a-tree>