iview TreeSelect插槽

在 iView（现为 View UI）中，`TreeSelect` 组件提供了灵活的插槽机制，允许开发者自定义节点内容的展示方式。通过使用插槽，可以实现图标、状态标识、多层级结构等丰富的 UI 表现。 ### 自定义节点内容 iView 的 `TreeSelect` 支持使用具名插槽 `default` 来自定义节点的显示内容。例如，可以在每个节点前添加图标，并根据数据状态改变图标的样式或颜色： ```vue <template> <TreeSelect :tree-data="treeData" v-model="selectedValue"> <template #default="{ node }"> <span> <svg-icon :name="node.status ? 'online' : 'offline'" /> {{ node.title }} </span> </template> </TreeSelect> </template> ``` 在此示例中，`svg-icon` 是一个假设存在的 SVG 图标组件，可以根据 `node.status` 属性来决定显示在线或离线图标[^2]。 ### 多选与自定义展示 当启用多选功能时，可以通过 `label-in-value` 和 `@change` 钩子来自定义选择项的展示文本。这在处理包含父子层级关系的数据时尤其有用： ```vue <template> <TreeSelect tree-checkable :tree-data="bizScenes" v-model="value" @change="sceneChange" label-in-value /> </template> <script> export default { data() { return { value: [], bizScenes: [ // 数据结构定义 ] }; }, methods: { sceneChange(value, label, extra) { value.map(item => { extra.allCheckedNodes.map(item1 => { if (item.value === item1.node.data.props.value) { item.label = item1.node.data.props.longTitle; } }); }); } } }; </script> ``` 此代码片段展示了如何将父级和子级名称组合成更长的标签文本以增强可读性[^3]。 ### 状态高亮与图标控制 为了实现点击节点时的高亮效果以及不同层级的图标差异，可以在 `render` 函数中进行条件判断并返回相应的 HTML 结构： ```vue <template> <TreeSelect :tree-data="mechanism2" ref="tree" :render="renderContent" /> </template> <script> export default { methods: { renderContent(h, node) { const icon = this.getIconByLevel(node.level); return h( 'span', { style: { color: node.selected ? '#FF0000' : '#000000' }, on: { click: () => this.handleClick(node) } }, [icon, node.title] ); }, getIconByLevel(level) { switch (level) { case 1: return h('svg-icon', { props: { name: 'level1-icon' } }); case 2: return h('svg-icon', { props: { name: 'level2-icon' } }); default: return h('svg-icon', { props: { name: 'default-icon' } }); } }, handleClick(node) { // 实现点击逻辑 } } }; </script> ``` 在这个例子中，`renderContent` 方法负责生成带有特定图标的节点元素，并且根据是否被选中来调整文字颜色以达到高亮效果[^1]。