el-popover里面嵌套多个button下拉按钮

勇敢琳琳不怕困难

已于 2024-09-04 15:36:29 修改

阅读量60

点赞数

文章标签： vue.js elementui 前端

于 2024-09-04 15:36:20 首次发布

本文链接：https://blog.csdn.net/m0_61101059/article/details/141895484

版权

直接上代码：

1:template部分代码如下

 <div>
          <el-button type="primary" @click="handleImport" v-if="nowStage==0">项目问题导入</el-button>
          <!-- <el-button type="primary" :disabled="multiple" v-if="nowStage==0">导出整改结果</el-button> -->
          <el-popover placement="bottom-end" trigger="click" @show="isShow==false" @hide="isShow==true" width="150" v-if="nowStage==0">
            <div class="column-flex noBtnMargin">
              <el-button type="primary" @click="print(1)">导出整改方案</el-button>
              <el-button type="primary" @click="print( 2)" class="mt10">导出整改结果</el-button>
              <el-button type="primary" @click="print(3)" class="mt10">导出全部</el-button>
            </div>
            <el-button slot="reference" @click="enter(row)" type="primary" class="ml10 mr10">
              导出
              <i class="el-icon-arrow-down" v-if="isShow" style="width:12px;height:12px;font-weight:600"></i>
              <i class="el-icon-arrow-up" v-else style="width:12px;height:12px;font-weight:600"></i>
            </el-button>
          </el-popover>
          <el-button type="primary" :disabled="multiple" v-if="nowStage==1">导出</el-button>
        </div>

2:样式部分：

// flex竖向布局通用类名
.column-flex {
  display: flex;
  flex-direction: column;
}
//不加这个样式的话，按钮会错位！
.noBtnMargin{
  ::v-deep .el-button + .el-button {
    margin-left: 0px; 
}
}