场景:
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; } // 主题色为黑色 // 字体为白色