vue项目element ui 树状控件样式问题
场景:
1.树状控件数据类型,由于结构中含有children [ {_e} ]数据类型,所以导致树状结构不完整的显示问题。
解决方案:主要在el-tree标签上默认展示所有的子节点。(添加属性:default-expand-all)
<el-tree :data="groupList" node-key="id" default-expand-all>
<div class="custom-tree-node" slot-scope="{ node, data }">
<!-- <span v-if="node.isLeaf"> 摄像头:</span> -->
<span>{{ data.label }}</span>
<span v-if="node.isLeaf" class="nodeButton">
<el-button type="success" size="mini" @click="setting(node,data)">配置</el-button>
</span>
<!-- <span v-if="!node.isLeaf"> ({{ data.children.length }})</span> -->
</div>
</el-tree>
2.树状控件的样式问题,当主题颜色为黑色时,需要对样式进行修改,有时会出现样式错乱的问题。
/* 树状图样式 */
.el-tree-node.is-current > .el-tree-node__content {
background-color: white !important;
color: black;
}
// 主题色为黑色
// 字体为白色
集思广益,仅供学习,侵权即删!!

浙公网安备 33010602011771号