zoukankan      html  css  js  c++  java
  • 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;
    }
    
    // 主题色为黑色
    // 字体为白色
    

      

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    关于垂直居中
    linux 前后台程序切换
    mac 下jetbrains IDE系列IDE主题
    mac 安装命令行开发者工具
    python 安装MySQLdb mysql_config not fount
    error: command 'cc' failed with exit status 1
    sqllite 入门
    jieba分词
    zookeeper 故障重连机制
    深入学习 celery
  • 原文地址:https://www.cnblogs.com/hudunyu/p/13722907.html
Copyright © 2011-2022 走看看