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

bash 复制代码
   <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>
相关推荐
知识分享小能手3 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
webYin10 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
Gazer_S11 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
小薛博客13 小时前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins
用户516816614584116 小时前
Uncaught ReferenceError: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not defined
前端·vue.js
熊猫片沃子16 小时前
Vue 条件与循环渲染:v-if/v-else 与 v-for 的语法简介
前端·vue.js
拜无忧16 小时前
【教程】vue+vite+ts创建一个最新的高性能后台项目架构
vue.js·typescript·vite
蝶开三月16 小时前
从卡顿到丝滑:3 个实战场景教你搞定代码性能优化
javascript·vue.js·性能优化
知否灬知否17 小时前
VUE3中换行的指示箭头组件(根据屏幕大小进行调节)
前端·javascript·vue.js
学习3人组17 小时前
Vue 与 React 全面功能对比
前端·vue.js·react.js