場景:
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; } // 主題色為黑色 // 字體為白色