当前位置：首页 > news >正文

Naive UI 级联选择器 Cascader的:render-lable怎么使用（Vue3 + TS）（鼠标悬停该条数据的时候展示全部内容）

news 2025/6/26 21:02:38

项目场景：

在渲染Cascader级联选择器后，当文字过长的时候，多出来的部分会显示成省略号，这使我们不能很清晰的看到该条数据的完整信息，就需要加一个鼠标悬停展示完整内容。

解决方案：

vue：

<n-cascader clearable v-model:value="unit" placeholder="所属地市" :title="unit" :options="options" check-strategy="child" @update-value="handleUpdateValue" :render-label="renderlabel" />

js：

const unit = ref<string>()
const options = ref<CascaderOption[]>([{"value": "1","label": "选项1","disabled": false,"children": [{"value": "1-1","label": "子选项1-1","disabled": false,"children": [{"value": "1-1-1","label": "孙选项1-1-1","disabled": false}]}]},{"value": "2","label": "选项2","disabled": true,"children": [{"value": "2-1","label": "子选项2-1","disabled": false}])
//这里其实就是创建了虚拟节点，这里就不赘述了，可以看前两篇笔记，有详细的解释
//这里解释一下 placement: 'left-end'  为什么可以在这里加这句话
//是因为Naive的 弹出提示 Tooltip组件支持placement属性，即popover 的弹出位置，
//我们这里是创建了一个NTooltip弹出提示的虚拟节点，传入的属性必须是这个NTooltip组件支持的属性才可以生效，
//换句话说就是h创建虚拟DOM的第二个参数设置的属性是传递给组件的，
const renderlabel = (option: { value?: string | number, label?: string }) => {return h(NTooltip, {placement: 'left-end'}, {trigger: () => h('span', option.label),default: () => {return h('span', {style: {color: '#526ade',}}, option.label as string)},})
}
const handleUpdateValue = function (value: string, option: CascaderProps) {}