哈尔滨专业网站制作,wordpress文章关联微信,深圳营销型网站建设设计公司,找网站公司做网站tree悬停tooltip效果
文本过长超出展示省略号
如果文本超出悬停显示tooltip效果 反之不显示
这里直接控制固定宽度限制 试了监听宽度没效果templateel-treeshow-checkbox:check-strictlytrue:datadatanode-keyid:propstemplateel-treeshow-checkbox:check-strictlytrue:datadatanode-keyid:propsdefaultPropstemplate #default{ node }spanel-tooltip :contentnode.label :disabled!isTextOverflow(node.label) placementtopspan classtree-node-label{{ node.label }}/span/el-tooltip/span/template/el-tree
/templatescript
import { ref } from vue;export default {setup() {const data ref([{ id: 1, name: Parent Node with very long text content that may overflow },{ id: 2, name: Parent,children: [{ id: 21, name: Child Node with normal length }]}]);const maxCharLength ref(10);//定义最大字符 根据需求可调整const defaultProps {label: name,children: children};// 检测文本是否溢出const isTextOverflow (label) {return label.length maxCharLength.value;};return {data,defaultProps,isTextOverflow};}
};
/scriptstyle scoped
.tree-node-label {display: inline-block;max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;
}
/style
