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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/925403.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据追踪技术有哪些?如何实现的?

在数字化时代&#xff0c;数据成为了业务决策和市场营销的关键资源。用户行为分析作为数据驱动的一部分&#xff0c;通过数据追踪技术帮助企业了解用户行为、趋势和偏好&#xff0c;从而制定更加精准的战略。本文将深入探讨数据追踪技术在用户行为分析中的神秘面纱&#xff0c;…

2024年信号处理与神经网络应用会

重要信息 会议时间&#xff1a;2024年12月13-15日 会议地点&#xff1a;中国武汉 会议官网&#xff1a;www.spnna.org 会议简介 2024年信号处理与神经网络应用&#xff08;SPNNA 2024&#xff09;将于2024年12月13日至15日在中国武汉召开。在为全球研究人员、工程师、学者和…

C++11-lambda表达式

目录 1.labmda的表达式 1.1.仿函数的使用 1.2lambda表达式的书写 1.3 lambda的捕获列表 1.3.1传值捕捉 1.3.2mutable可以修改拷贝对象 1.3.3 引用捕获 1.3.4混合捕捉 1.4 函数对象与lambda表达式 1.5 lambda和仿函数的比较 &#x1f33c;&#x1f33c;前言&#xff1a;从…

蓝桥杯模拟题不知名题目

题目:p是一个质数&#xff0c;但p是n的约数。将p称为是n的质因数。求2024最大质因数。 #include<iostream> #include<algorithm> using namespace std; bool fun(int x) {for(int i 2 ; i * i < x ; i){if(x % i 0)return false;}return true; } int main() …

mac访达打开终端

选择文件夹打开 选中文件夹&#xff0c;然后右键即可&#xff1a; 在当前文件夹打开 在访达的当前文件夹长按option键 左下角出现当前文件夹路径 右键即可打开终端

永久免费的PDF万能水印删除工具

永久免费的PDF万能水印删除工具 1.简介 PDF万能水印删除工具&#xff0c;可以去除99.9%的PDF水印。例如&#xff1a;XObject水印&#xff08;含图片水印&#xff09;、文本水印、绘图水印/曲线水印、注释水印、工件水印、剪切路径水印等等。本软件是永久免费&#xff0c;无有…

小程序 - 本地生活

小程序页面和样式练习 - 本地生活小程序开发笔记 目录 本地生活 准备工作 加载图片素材 页面开发 页面样式开发 功能实现截图 总结 本地生活 本地生活”微信小程序是一个介绍本地美食、装修、工作等信息的微信小程序&#xff0c;该微信小程序的首页包含轮播图区域和九宫…

基于SpringBoot实现的编程训练系统(代码+论文)

&#x1f389;博主介绍&#xff1a;Java领域优质创作者&#xff0c;阿里云博客专家&#xff0c;计算机毕设实战导师。专注Java项目实战、毕设定制/协助 &#x1f4e2;主要服务内容&#xff1a;选题定题、开题报告、任务书、程序开发、项目定制、论文辅导 &#x1f496;精彩专栏…

泷羽sec-shell (3)脚本参数传递与数学运算

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…

QT实战--qt各种按钮实现

本篇介绍qt一些按钮的实现&#xff0c;包括正常按钮&#xff1b;带有下拉箭头的按钮的各种实现&#xff1b;按钮和箭头两部分分别响应&#xff1b;图片和按钮大小一致&#xff1b;图片和按钮大小不一致的处理&#xff1b;文字和图片位置的按钮 效果图如下&#xff1a; 详细实现…

MTK主板_小型联发科安卓主板_行业智能终端主板基于联发科方案

MTK安卓主板是一款小巧而高效的科技产品&#xff0c;其尺寸仅为43.4mm x 57.6mm。采用了先进的联发科12nm制程工艺&#xff0c;这款主板搭载四核或八核64位A53架构的CPU&#xff0c;主频高达2.0GHz&#xff0c;不但保证了出色的计算能力&#xff0c;还实现了超低功耗的特点。系…

Web day02 Js Vue Ajax

目录 1.javascript: 1.js的引入方式&#xff1a; 2.js变量 & 数据类型 & 输出语句&#xff1a; 模板字符串&#xff1a; 3.函数 & 自定义对象&#xff1a; 4. json 字符串 & DOM操作&#xff1a; 5. js事件监听&#xff1a; 6.js的模块化导入或者导出&a…

Dify进阶:知识库构建,MinerU安装完成,看看效果

文章目录 最终效果展示MinerU安装成功 最终效果展示 MinerU安装成功 上回说道&#xff0c;MinerU可以将pdf转化为Markdown&#xff0c;这对于大语言模型的知识库构建来说&#xff0c;十分重要。 由于我是windows电脑&#xff0c;使用的安装步骤是&#xff0c;直接从github下载…

皮肤癌检测 6596张图片支持YOLO,COCO,VOC的

关于数据集 使用YOLO、COCO和VOC等算法和数据集可以提高皮肤癌检测的准确性和效率&#xff0c;帮助医生和患者识别和治疗皮肤癌。这里我整理了一下yolov5, yolov7,yolov8,yolov9,yolov11, coco,cov标记的数据集。 数据集分割 6596总图像数 训练组 82&#xff05; …

Vue.js 中 v-for 指令的三种常见用法详解及key、value、id的作用

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;WebStorm 目录 遍历数组 介绍 代码 遍历对象数组 介绍 代码 遍历对象本身 介绍 代码 效果呈现 key、value、id的作用 1. value 2. key 3. id 在 Vue.js 中&#xff0c…

【C语言算法】蛇形方阵 暴力破解之(if函数)

文章目录 1. 问题描述2. 题目分析与代码设计3. 代码实现4. 运行效果 1. 问题描述 在n x n(n≤8)方阵里填入1&#xff0c;2&#xff0c;3&#xff0c;…&#xff0c;n x n&#xff0c;要求填成蛇形。 列如 n4 时方阵为&#xff1a; 2. 题目分析与代码设计 算法的步骤和分析&…

从覆盖到拼接:优化 onInput 事件的输入

在使用 ElSelect 组件的 onInput 事件时&#xff0c;由于每次输入都触发搜索&#xff0c;导致请求频繁且新搜索结果覆盖了旧结果&#xff0c;无法实现输入数据的累积搜索。我们希望的是&#xff0c;每次搜索能够将新的输入内容与之前的内容拼接显示&#xff0c;从而实现用户的诉…

Flink四大基石之CheckPoint

1、State Vs Checkpoint State:状态,是Flink中某一个Operator在某一个时刻的状态,如maxBy/sum,注意State存的是历史数据/状态,存在内存中。 Checkpoint:快照点, 是Flink中所有有状态的Operator在某一个时刻的State快照信息/存档信息。 一句话概括: Checkpoint就是State的快照…

如何给GitHub的开源项目贡献PR

&#x1f3af;导读&#xff1a;本文详细介绍了如何向开源项目“代码随想录”贡献自己的题解。首先&#xff0c;需要Fork原项目的仓库至个人GitHub账户&#xff0c;然后解决克隆仓库时可能遇到的SSH密钥问题。接着&#xff0c;按照标准流程对本地仓库进行代码或文档的修改&#…

不可分割的整体—系统思考的微妙法则

不可分割的整体——系统思考的微妙法则 作为企业领导者&#xff0c;我们经常需要做出决策&#xff0c;但有时候&#xff0c;我们会忽略一个事实&#xff1a;每个决策都不是孤立的&#xff0c;它背后都是一个复杂系统的一部分。 无论是市场动态、团队协作&#xff0c;还是产品…