el-scrollbar scrollbar elementui el
elementui表单循环添加校验
1 <el-form 2 :model="dynamicValidateForm" 3 ref="dynamicValidateForm" 4 :inline="true" 5 > 6 <template v-for="(item, index) in dynamicValidateForm.dom ......
el-input输入校验
<el-input type="textarea" style="width: 100px !important;" :max="9999" :min="0" :precision="0" :step="1" :controls="false" v-model.number="detailsData ......
vue中el-checkbox全选、反选、多选
<template> <div> <el-checkbox v-model="checkAll" @change="handleCheckAllChange" :indeterminate="isIndeterminate" >全选</el-checkbox > <el-checkbox v-mod ......
vue 不同版本定义 el-date-picker 日期选择器快捷项
1、效果 2、vue 2 :picker-options <el-date-picker style="width: 350px" v-model="dates" type="daterange" align="right" unlink-panels range-separator="至" sta ......
el-dialog每次重新打开展示不同的内容，滚动条未重新置顶的解决方案。
环境 nuxt3 + vu3 + element-plus-2.3.3 复现原因 假设有5条内容，打开一项内容通过el-dialog进行展示，当出现滚动条后，往下滑动，紧接着通过esc或遮罩进行关闭，打开另一项内容，这时候滚动条并未进行置顶。 解决方法 参考就行了。 js部分 const data ......
批量上传GPT知识库，前端elementui的upload上传组件，后端Golang的上传接口实现
为了实现批量上传GPT的知识库并且功能，那么这个上传组件就必不可少，需要能把文档上传到服务器中。 前端部分，我是采用的cdn引入的形式，引入的elmentui。该框架是有上传组件的，可以参考我的用法： action部分就是上传接口，其他三个是上传之前的处理，上传成功和失败后的回调函数 <el-upl ......
vue动态style el-table-column 状态 颜色
<el-table-column prop="processStatusName" label="状态" width="100" align="center" > <template slot-scope="scope"> <span :style="{ color: setColumnColor( ......
el-menu使用递归组件实现多级菜单组件
1. 效果： 2. 实现： 创建外层菜单AsideMenu.vue组件和子菜单项AsideSubMenu.vue组件，在AsideSubMenu中进行递归操作。 AsideMenu.vue文件内容如下： <template> <aside class="wrap"> <el-menu :defaul ......
element使用组件el-form自动定位到未填写的必填条目
问题：在form表单el-form中经常会出现表单条目比较多的问题，而且在提交的时候需要校验表单并且定位到相应的条目位置。 解决： html： <el-form ref="form" :model="form" :rules="rules" label-width="140px"> <el-form ......
el-table复杂表格合并行并且合并列
实现效果： 表格代码： <el-table :data="dataList" :span-method="objectSpanMethod" :header-cell-style="{background:'#F4F8FF'}" ref="multipleTable" tooltip-effect= ......
解决JSP中写el表达式没有效果
原因：web.xml中使用的web-app版本过低。 解决： 首先确保导入的el表达式的依赖 <!-- https://mvnrepository.com/artifact/javax.el/javax.el-api --> <dependency> <groupId>javax.el</group ......
使用flex布局，el-table宽度溢出
页面使用flex布局，el-table的宽度继承自父元素的宽度设置为100%，但是table宽度溢出了，给每一列设置固定宽度可以解决溢出，但是没有办法在屏幕放大的时候自适应，后来通过给父元素加了position：relative，el-table加上position：absolute可以实现列宽自适 ......
基于elementui的Tree虚线，实线绘制，以及懒加载，如图
加减号用的是阿里的矢量图标库。自行去下载 路径： https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 <template> <div class="content-box"> <div class="content-to ......
el-tree 的样式修改之旅
原始样式如下图： 我想要实现的样子如下图： 首先分析一下想要实现的效果图：1，想要从原始效果到效果图的样子都需要修改那些地方 2，都涉及到那些样式问题 其次简要说一下本人在实践中都遇到了那些样式问题： 1，修改el-tree中checkbox选中时的背景颜色，选中的时的对钩颜色 2，一级节点和二级节 ......
修改el-tree checkbox和文字大小
原始效果： 需求描述：默认效果如上图，想改变复选框的大小，方便使用者勾选，需要修改el-tree checkbox和文字的大小 <el-checkbox class="el-checkbox" label="" v-model="item.check" ></el-checkbox> 主要代码是cs ......
vue3 el-table-column 修改时间格式
根据element文档说明，el-table中的el-table-column 是可以使用 formatter 格式化时间的。 先添加 绑定函数 formatter <el-table-column prop="createdTimeFormat" :formatter="dateFormat" l ......
el-table树形数据与懒加载
<template> <div class="page"> <div class="page-box"> <h3 style="margin-top: 0">类目 / 榜单管理</h3> <el-input placeholder="请输入关键字" v-model="keyWord" style=" ......
前端 - 解决el-table 无限拉伸问题
解决el-table 无限拉伸问题 设置表格的max-height <el-table border :data="tableData" max-height="500px"> 上一步设置成功后，在浏览器缩放条件下仍然存在无限拉伸的问题，这时需要做自适应 ::v-deep .el-table{ wi ......
elementUI input只能输入数字、小数的几种方法
elementUI input只能输入数字、小数的几种方法 原文链接：https://blog.csdn.net/weixin_42397937/article/details/123297108 elementUI文本框input设置仅可输入数字或者小数的几种方法 一、设置type=“number ......
Vue3中无法为el-tree-select设置反选问题分析
环境：Vue3.2、Element Plus
问题：子组件 setting.vue => 弹窗组件 Dialog => 树选择组件el-tree-select ，无法设置默认选中项 default-checked-keys
场景：在一个后台系统的列表页，选中一行数据，点击设置按钮，分配一些功能。这里... ......
element-plus —— 如何对elementUI-plus进行debugger
前言 无论什么UI其实操作都一样，至于为什么debugger，那肯定是有问题而且涉及到源码了，哈哈哈； 内容 引入组件后在对应的组件里面进行debugger即可 <template> <el-select></el-select> <el-dialog v-model="dialogVisible" ......
elemenut的el-input限制只能输入数字
限制只能输入整数 关键代码: 只能输入整数: oninput="this.value = this.value.replace(/[^0-9]/g, '');" 只能输入整数且长度小于7: oninput="if( this.value.length > 7 ) {this.value = this ......
elementui table 禁用部分多选框
// 禁用多选 checkboxT(row) { if (row.bomDetailParentId == 0) { return true; //禁用 } else { return false; //不禁用 } }, <el-table-column type="selection" width ......
el-form-item中绑定对象
ElementUi中的el-form-item绑定对象中的集合中的对象属性 // 通用合同信息 class Form { constructor () { /** 必填字段 */ this.projectName = null this.address = null this.code = null ......
el-input的多行文本框textarea固定多行不可拖拽
<el-input v-model="dataForm.meterMemo" type="textarea" :rows="2" placeholder="备注" resize="none" ></el-input> 参考 https://blog.csdn.net/seimeii/article/ ......
vue el-upload自定义文件列表以及自定义上传事件，导致触发自定义上传时无法上传的问题
1.自定义列表：:file-list="my_fileList" 2.自定义上传方法 3.发现当触发confirm_upload 无法执行上传 4.查看uploadFiles的列表时，status为success（猜想：实际的上传文件列表为uploadFIles ，uploadFIles=my_fi ......
基于SpringBoot+Vue+ElementUI的在线考试系统（可做毕设）
青云是一套麻雀虽小但五脏俱全的在线考试系统。
采用了目前主流的技术栈SpringBoot+Vue+ElementUI，并进行了前后端分离。
对于事务和锁都有应用，非常适合学习练手。 ......
ElementUI之el-date-picker禁选配置
日期选择器之picker-options设置 <el-date-picker v-model="dateChoose" clearable type="date" format="yyyyMMdd" value-format="yyyyMMdd" :editable="false" :picker- ......