el-table嵌套两层el-dropdown-menu导致样式错乱

问题:

解决方式:

<el-table-column label="操作" fixed="right" width="132" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row._index != '合计'">
                <el-dropdown trigger="click" type="primary" style="margin-top:0px;">
                    <div class="el-dropdown-link btn2-icon btn-small-round btn2-bg-blue" type="primary">在线预览<i class="btnicon-more"></i></div>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item @click.native="onlineView(scope.row,'KHXX')">客户信息表</el-dropdown-item> -->
                        <el-dropdown-item @click.native="onlineView(scope.row,'SPDC')">审批调查表</el-dropdown-item>
                        <el-dropdown-item @click.native="onlineView(scope.row,'DCBG')">调查报告</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" type="primary" style="margin-top:0px;">
                    <div class="el-dropdown-link btn2-icon btn-small-round btn2-bg-blue" type="primary">下载<i class="btnicon-more"></i></div>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item @click.native="downloadFile(scope.row,'KHXX')">客户信息表</el-dropdown-item> -->
                        <el-dropdown-item @click.native="downloadFile(scope.row,'SPDC')">审批调查表</el-dropdown-item>
                        <el-dropdown-item @click.native="downloadFile(scope.row,'DCBG')">调查报告</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
          </template>
        </el-table-column>

给菜单单独添加样式进行修改

<style scoped>
  .btn2-icon i{
      display:inline-block; 
      vertical-align:top; 
      margin:2px 2px 0 0; 
      width:20px; 
      height:20px; 
  }
  .btn2-icon i.btnicon-more{
      background:url(/static/img/feature/public/btn-icon-more.png) no-repeat center; 
      background-size:20px;
  }
  .btn2-bg-blue, .btn-bg-blue:hover {
      width: 100px;
      margin-top: 4px;
      background-color: #62a8ea;
      color: #fff;
  }
  </style>

最后效果:

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-18 05:04:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-18 05:04:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-18 05:04:01       82 阅读
  4. Python语言-面向对象

    2024-01-18 05:04:01       91 阅读

热门阅读

  1. Linux 文件搜索大师:掌握 find 命令的艺术与示例

    2024-01-18 05:04:01       45 阅读
  2. Qt:信号

    2024-01-18 05:04:01       51 阅读
  3. Matlab中常见的数据平滑方式

    2024-01-18 05:04:01       46 阅读
  4. Lumerical ------ 直波导仿真及技巧

    2024-01-18 05:04:01       56 阅读
  5. HTTP API 认证技术详解(一):Basic Authentication

    2024-01-18 05:04:01       52 阅读
  6. uniapp——自定义导航栏的封装

    2024-01-18 05:04:01       61 阅读
  7. 优化ansible执行playbook速度

    2024-01-18 05:04:01       44 阅读
  8. 在FFmpeg源码下增加自定义程序

    2024-01-18 05:04:01       44 阅读