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;
}

// 主题色为黑色
// 字体为白色

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM