vue element tree自定义树。内容过长显示...鼠标悬浮显示全部
css/*树悬浮框: 名字过长则显示...*/.span-ellipsis {width: calc(100% - 4px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;min-width: auto;padding: 4px 2px;border-radius: 4px;}应用<el-tree :data="Da
·
css
/*树悬浮框: 名字过长则显示...*/ .span-ellipsis { width: calc(100% - 4px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: auto; padding: 4px 2px; border-radius: 4px; }
应用
<el-tree :data="Datas" :props="defaultProps" :indent="0" :highlight-current="highLight" node-key='id' ref='treeList' default-expand-all > <span class="span-ellipsis" slot-scope="{ node, data }"> <el-tooltip class="item" effect="light" :content="node.label||''" placement="top-start"> <span >{{ node.label }}</span> </el-tooltip> </span> </el-tree>
<el-tree :data="BasicInfo_EquipmentClass_allDatas" :props="defaultProps" :indent="0" :highlight-current="highLight" node-key='id' ref='treeList' default-expand-all @node-click="BasicInfo_EquipmentClass_NodeClick">
<span class="span-ellipsis" slot-scope="{ node, data }">
<el-tooltip class="item" effect="light" :content="node.label||''" placement="top-start">
<span >{{ node.label }}</span>
</el-tooltip>
</span>
</el-tree>
css样式(虚线)
/*tree*/
.el-tree-node i {
color:#006F6B;
}
/*树选中颜色*/
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-focusable>.el-tree-node__content {
background-color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content>.el-tree-node__label {
background-color: #83F8DA;
}
.el-tree-node__label {
padding: 4px 2px;
border-radius: 4px;
}
/*树字体*/
.el-tree-node, .el-tree-node__label{
white-space: nowrap;
outline: 0;
font-size: 12px;
font-family: SimSun;
font-weight: 400;
color: #666666;
}
/*树图标*/
/*父节点 闭合*/
.el-tree-node__content>.el-tree-node__expand-icon {
padding: 6px;
background: blue;
background: url('../../assets/img/fold-close.png') no-repeat ;
}
/*父节点 展开*/
.el-tree-node__content>.el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background: red;
background: url('../../assets/img/fold-open2.png') no-repeat ;
/*background: url('../../assets/img/fold-open.png') no-repeat ;*/
}
/*叶子图标*/
.el-tree-node__content>.el-tree-node__expand-icon.is-leaf {
color: transparent;
cursor: default;
background: pink;
background: url('../../assets/img/file.png') no-repeat ;
padding-left: 8px;
margin-left: 1px;
}
.el-icon-caret-right:before {
content: "";
}
/*tree虚线*/
.el-tree-node{
position: relative;
padding-left: 15px;
}
.el-tree-node__children{
padding-left: 10px;
}
.el-tree-node :last-child:before {
height: 38px;
}
.el-tree>.el-tree-node:before{
border-left: none;
}
.el-tree>.el-tree-node:after{
border-top: none;
}
.el-tree-node:before,.el-tree-node:after{
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.tree :first-child .el-tree-node:before{
border-left: none;
}
.el-tree-node:before {
border-left: 1px dashed #B3B3B3;
bottom: 0px;
height: 100%;
top: -20px;
width: 1px;
}
.el-tree-node:after {
border-top: 1px dashed #B3B3B3;
height: 20px;
top: 17px;
width: 12px;
}
.el-tree-node__content .is-leaf{
margin-left: -10px;
}
.el-tree-node :last-child:before {
height: 30px;
line-height: 30px;
}
/*树悬浮框时:树选中颜色*/
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-focusable>.el-tree-node__content {
background-color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content>.span-ellipsis {
background-color: #83F8DA;
}
/*树悬浮框: 名字过长则显示...*/
.span-ellipsis {
width: calc(100% - 4px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: auto;
padding: 4px 2px;
border-radius: 4px;
}
更多推荐
已为社区贡献17条内容
所有评论(0)