在utils下新建一个filters.js文件 内容
/**
* 省略多余字符,用...显示
* @param {String} value
* @param {number} len
*/
export function ellipsis(value, len) {
if (!value) return ''
if (value.length > len) {
return value.slice(0, len) + '...'
}
return value
}
在min.js引入
import * as filters from "@/utils/filters"
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
<span>{{ node.label | ellipsis(5) }}</span>
</el-tooltip>
<span>
可以带一个title超过10以后在显示,
:title="node.label.length>10?node.label:''"
附带参考地址:el-tree节点名称太长省略,且鼠标点击显示全部内容,Vue实现_HuiRonmantic的博客-CSDN博客