a-tree 节点自定义样式 slot=“custom“ slot-scope=“item“不起作用

最新推荐文章于 2024-07-31 16:58:25 发布

qq_47690349

最新推荐文章于 2024-07-31 16:58:25 发布

阅读量642

点赞数 4

文章标签： vue.js 前端 javascript anti-design-vue

本文链接：https://blog.csdn.net/qq_47690349/article/details/138870619

版权

ant design vue a-tree 自定义节点样式

在使用a-tree时需要根据子节点的某个属性来展示不同样式，本来打算用rander渲染，结果发现a-tree好像不支持还是怎么，没起作用，之后网上搜索发现使用 slot=“custom” slot-scope=“item"结果还是一直报错，就想使用#default=”{ data }"结果还是没有用，最后想到用a-tree自带的title用,没想到还真可以，代码如下

<a-tree :tree-data="treeData">
  <template #title="{ data }">
    <span v-if="data.fileNm === 4" style="color: red">{{ data.title }}{{ data.num }}</span>
    <span v-else>{{ data.title }}</span>
  </template>
</a-tree>