el-radio-group 与 el-dropdown 组合使用的注意事项

MaterialIn.vue

el-dropdown 在 el-radio-group 外

html 复制代码
      <el-dropdown class="header-dropdown" split-button type="primary" @click="onNewClick">
        新建
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="onPurchaseRkClick">申购入库</el-dropdown-item>
            <el-dropdown-item @click="onDirectRkClick">直接入库</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-radio-group class="header-e" v-model="rkType">

效果:

el-dropdown 在 el-radio-group 内

html 复制代码
      <el-radio-group class="header-e" v-model="rkType">
        <el-dropdown class="header-dropdown" split-button type="primary" @click="onNewClick">
          新建
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="onPurchaseRkClick">申购入库</el-dropdown-item>
              <el-dropdown-item @click="onDirectRkClick">直接入库</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

效果:离顶部的间距会变大

相关推荐
怪我冷i2 分钟前
es6与es5的模块区别
前端·ecmascript·es6·ai写作
一 乐4 分钟前
助农服务系统|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
前端·数据库·vue.js
by__csdn6 分钟前
Vue 2 与 Vue 3:深度解析与对比
前端·javascript·vue.js·typescript·vue·css3·html5
s***35309 分钟前
怎么下载安装yarn
android·前端·后端
q***64979 分钟前
Spring boot整合quartz方法
java·前端·spring boot
行走的陀螺仪11 分钟前
Vue3远程加载阿里巴巴字体图标实时更新方案
前端·icon·字体图标·阿里巴巴图标库
0***h94211 分钟前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
q***783712 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
z***948414 分钟前
使用rustDesk搭建私有远程桌面
android·前端·后端
❆VE❆22 分钟前
【技术分享】前端跨窗口/标签页面通信:掌握以下几种方法,提升用户体验(附带常用场景以及典例)
前端·javascript·性能优化·vue·跨标签通信