修复el-tree文字超长问题.jpg
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>el-tree样式优化</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.my-tree {
width: 500px;
border: 1px solid #ddd;
}
.my-tree .el-tree-node__content {
overflow: hidden;
}
.my-tree .custom-tree-node {
overflow: hidden;
flex-shrink: 1;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.my-tree .custom-tree-node .label {
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.my-tree .custom-tree-node .button {
flex-grow: 0;
flex-shrink: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="my-tree">
<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="label">{{ node.label }}</span>
<span class="button">
<el-button type="text" size="mini" @click="() => append(data)">
Append
</el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)">
Delete
</el-button>
</span>
</span>
</el-tree>
</div>
</div>
<script>
let id = 1000;
new Vue({
el: "#app",
data: {
data: [{
id: 1,
label: '一级 2',
children: [{
id: 3,
label: '二级 2-1二级 2-1二级 2-1二级 2-1二级 2-1二级 2-1二级 2-1二级 2-1',
children: [{
id: 4,
label: '三级 3-1-1三级 3-1-1三级 3-1-1三级 3-1-1三级 3-1-1三级 3-1-1三级 3-1-1三级 3-1-1'
}, {
id: 5,
label: '三级 3-1-2三级 3-1-2三级 3-1-2三级 3-1-2三级 3-1-2三级 3-1-2三级 3-1-2'
}]
}, {
id: 2,
label: '二级 2-2二级 2-2二级 2-2二级 2-2二级 2-2二级 2-2二级 2-2二级 2-2二级 2-2二级 2-2二级 2-2',
children: [{
id: 6,
label: '三级 3-2-1'
}, {
id: 7,
label: '三级 3-2-2'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
})
</script>
</body>
</html>
网友评论