当前位置: 首页 > article >正文

el-selet下拉菜单自定义内容,下拉内容样式类似表格

在这里插入图片描述

   <el-form-item label="角色:" prop="username">
          <el-select
            v-model="value"
            placeholder="Select"
            popper-class="role_select"
          >
            <el-option disabled>
              <div class="flex">
                <div style="width: 150px">
                  角色
                </div>
                <div>特权</div>
              </div>
            </el-option>
            <el-option
              v-for="item in roleList"
              :key="item.roleid"
              :label="item.roleid"
              :value="item.roleid"
            >
              <div class="flex">
                <div style="width: 150px">
                  {{ item.roleid }}
                </div>
                <el-space
                  wrap
                  style="
                    width: 500px;
                    white-space: normal;
                    word-wrap: break-word;
                  "
                >
                  <el-tag
                    v-for="item1 in item.privs"
                    :key="item1"
                    plain
                    type="primary"
                    size="small"
                  >
                    {{ item1 }}
                  </el-tag>
                </el-space>
              </div>
            </el-option>
          </el-select>
        </el-form-item>```
        
css部分:
不加scoped
<style lang="scss">
.role_select {
  height: unset !important;
  .el-select-dropdown__item {
    height: unset;
    line-height: unset;
    border-bottom: 1px solid #dcdfe6;
    padding: 5px 30px 5px;
  }
}
</style>

http://www.kler.cn/a/416851.html

相关文章:

  • ChatGPT 网络安全秘籍(二)
  • pytest+allure生成报告显示loading和404
  • Linux—进程学习—04(进程地址空间学习)
  • 10、流程控制语句
  • Mac配置和启动 Tomcat
  • fiddler安卓雷电模拟器配置踩坑篇
  • ChatGPT的应用场景:开启无限可能的大门
  • apache实现绑定多个虚拟主机访问服务
  • Vue项目运行步骤(详细图解)
  • 静态页面 和 动态页面(Java Web开发)
  • 【Linux网络编程】第三弹---UDP网络通信深度解析:构建服务器端、客户端,并实现两端通信的完整步骤与测试
  • 【传感器技术】第6章 压电式传感器
  • [python脚本处理文件入门]-18.使用Python进行PDF文件的合并与拆分
  • 浅谈volatile
  • Mybatis:CRUD数据操作之修改数据update
  • 【QT/MinGW/.a->.lib】如何将一个用QT的MingGW编译dll项目出的dll文件导出一份.lib文件给其他项目链接动态库用
  • docker启动容器,语句名词解释
  • day21:jumpserver配置与搭建
  • 【bug】AttributeError: module ‘openai‘ has no attribute ‘error’
  • 第6章 元素应用CSS
  • 信息与网络安全笔记2
  • 常见靶场的搭建
  • 去中心化物理基础设施网络(DePIN):重塑未来的基石
  • 分析 系统滴答时钟(tickClock),设置72MHz系统周期,如何实现1毫秒的系统时间?
  • SpringBoot源码-spring boot启动入口ruan方法主线分析(二)
  • 如何解决 javax.xml.bind.MarshalException: 在 RMI 中,参数或返回值无法被编组的问题?亲测有效的解决方法!