需求描述
- 获取 el-cascader 选中内容的 label 数据
- 选中内容较长时,超长内容默认省略号显示,添加鼠标悬浮提示效果,显示完整内容。
最终效果
核心代码
// 获取级联选择器选中数据的内容 getdata() { this.labelString = this.$refs.cascader_Ref.getCheckedNodes()[0].pathLabels.join(" / "); },
完整代码
<template> <div style="padding: 30px"> <div class="block"> <el-tooltip :disabled="!labelString" effect="dark" :content="labelString" placement="top-start" > <el-cascader size="small" @change="valueChange" v-model="value" :options="options" ref="cascader_Ref" ></el-cascader> </el-tooltip> </div> </div> </template> <script> export default { data() { return { labelString: "", value: [], options: [ { value: "zhinan", label: "指南", children: [ { value: "shejiyuanze", label: "设计原则", children: [ { value: "yizhi", label: "一致——最终值过长测试数据1", }, { value: "fankui", label: "反馈——最终值过长测试数据2", }, ], }, ], }, ], }; }, methods: { valueChange() { this.getdata(); }, // 获取级联选择器选中数据的内容 getdata() { this.labelString = this.$refs.cascader_Ref.getCheckedNodes()[0].pathLabels.join(" / "); }, }, }; </script>