el-tree节点名称太长省略,且鼠标移入显示全部内容,Vue2实现
代码结构
<el-tree
:data="cskData"
:props="cskbxProps"
@node-contextmenu="rightClick"
show-checkbox
:default-expanded-keys="cskExpandedKeys"
:default-checked-keys="checkBoxKeyList"
ref="tree"
highlight-current
@node-click="getNodeCskData"
@check-change="handleCheckChange"
@check="handleCheck"
node-key="tableColumnCodeAlias"
>
<span slot-scope="{ node, data }" class="custom-tree-node showname text-hide" :title="node.label">
<el-tooltip :content='data.label' placement="top"
effect="light">
<div>{{data.label | ellipsis}}</div>
</el-tooltip>
</span>
</el-tree>
js
filters:{
ellipsis(value) {
if (!value) return "";
if (value.length > 7) {
return value.slice(0, 7) + "...";
}
return value;
}
},
使用vue2的filters(过滤器)。https://v2.cn.vuejs.org/v2/guide/filters.html
如果要将过滤器内的字数变为参数传入,则可以,
//这里以10为例
{{data.label | ellipsis(10)}}
filters:{
ellipsis(value, k) {
if (!value) return "";
if (value.length > k) {
return value.slice(0, k) + "...";
}
return value;
}
},