elementui
Elementui的使用
element官网 第一步：安装 cnpm i element-ui -S 第二步：main.js中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Elemen ......
elementui(element-plus)中el-alert实现换行的方法
elementui(element-plus)中el-alert实现换行的方法 <el-alert title="说明：" type="warning" show-icon> <div>1、账号跟密码卡不能重复</div> <div >2、密码长度必须超过10位数</div> </el-alert> ......
vue通过elementUI组件实现图片预览效果 点击按钮后触发
<el-image ref="elImage" style="width: 0; height: 0;" :src="bigImageUrl" :preview-src-list="logicImageList"></el-image> detialClick(img) { this.$nextTi ......
ElementUI中el-tree-select使用
<el-tree-select multiple v-model="org" check-strictly :data="state.orgData" check-on-click-node :render-after-expand="false" :props="state.typeProps" ......
elementUi tabs默认样式选中不显示下划线问题
::v-deep .el-tabs__header { padding: 10px 20px 0px 20px; } ::v-deep .el-tabs__item { width: 140px; text-align: center; padding: 0px; } ::v-deep .el-ta ......
elementUI上传组件，上传单个文件后隐藏上传按钮
vue代码 <el-upload ref="AvatarUpload" list-type="picture-card" action="" accept=".jpg, .png" :limit="1" :auto-upload="false" :file-list="fileList" :on-c ......
elementUI 的el-dialog作为子组件，父组件如何控制其关闭的按钮
这里有三点需要说明： 1. 使用：before-close="closeHandle" 将其 $emit() 出去 2. 取消按钮 也需要$emeit出去 3. 控制对话框显示隐藏的变量需要props给父组件来传值，这个相当重要，不然控制不了对话框的显示隐藏 4.1,2步骤是为了在子组件不再重复操作 ......
elementui中附件上传功能 el-upload 踩坑 问题分析以及解决
1、Current request is not a multipart request 很离谱这个错误，这个错误原因是我的data写成date： 2、Required request part ‘file‘ is not present： 首先要知道这个错误是来自后台，通常是@RequestPar ......
vue+elementUi中国省市区/省市，三级/两级联动选择
安装城市数据 npm install element-china-area-data -S 导入数据 import { regionData, codeToText } from 'element-china-area-data' 1. 显示全部城市 HTML代码： <template #equip ......
elementui el-upload 实现不自动上传功能，点击确定在上传，并且显示上传进度条功能
<div> <div class="row mt-2"> <div class="col-lg-12"> <label>agent文件名</label> <input v-model="addParams.newAgent" type="text" class="form-control" plac ......
elementUI-table 表格内容按照内容显示，且没有折行
/** * 使用span标签包裹内容，然后计算span的宽度 width： px * @param valArr */ getTextWidth(str) { let padding = 0;//单元格左右padding距离 let width = 0; let span = document.cr ......
elementUI + Spring上传文件
elementUI + Spring上传文件 表单文件上传 【elementUI + Spring报错解决方案】Required request part ‘***‘ is not present 表单上传文件时需要去除@RequestBody 前端文件上传 doApprove() { const ......
elementUI中关于 el-table 表尾合计行列子
列表中数量和金额需要统计并显示单位： 统计后的效果如下： <el-table v-loading="loading" border :data="List" @selection-change="handleSelectionChange" show-summary :summary-method= ......
设置ElementUI表格只能单选
隐藏表头 利用select事件和toggleRowSelection方法 // 伪代码 @select="select" select(row) { const selectData = this.$refs.table.selectedData; this.selectedData = Objec ......
elementui el-upload实现不自动上传，将上传内容放在formData里面，传递给后端
//这种情况一般是要弹出一个弹框进行上传操作 <el-upload ref="upload" action="" name="fileList" :show-file-list="false" :auto-upload="false" :multiple="true" :headers="heade ......
关于elementUI开发中使用的一些小技巧
关于表格 1.表格的勾选遇上分页 问题：当需要对表格批量操作，并且表格数量量不止一页的情况下，怎么在点击下一页时再回来能够保留之前勾选的状态（前端分页）？ 在element官网中没有这个例子，但是有对应的两个属性就可以了 只需要在多选框那一列加上这个属性，并且设置表格每行的key： 例子： <el- ......
除了elementUI，还有这些vue框架？？？
原来Vue.js还有这么多好用的UI组件库 前言 前几天笔者在逛推的时候关注到这样一篇帖子： 翻译下来就是这个： 相对于 React，我更喜欢 Vue，但是该死的 - Radix UI、shadcn、Tremor 等看起来都很棒。 Vue 肯定缺少一些顶级的 UI 组件库（特别是考虑到 Tailwi ......
ElementUI2+Vue2实现日期选择长期功能
ElementUI2+Vue2实现日期选择长期功能 效果如图： 代码如下： <template> <div> <el-row> <div class="block"> <span class="demonstration">带快捷选项</span> <el-date-picker v-model=" ......
elementui 自定义上传接口上传完图片之后无法再进行第二次上传，踩坑解决
1，上传功能 <el-upload action="" ref='upload' :http-request="handleFileUpload" :limit="1" :show-file-list="false" > <i class="el-icon-upload2"></i> </el-up ......
vue 使用elementui el-image 图片地址不变，图片不刷新问题
问题 ：el-image图片地址不变，图片不刷新问题 原因 ： 在 Web 开发中，浏览器会缓存已经加载的静态资源（比如图片、CSS、JS 文件），以提高页面加载速度，减轻服务器负担。 当图片的源路径不变时，浏览器会对这些图片进行缓存，如果图片内容更新了，但是浏览器还是使用缓存，这时候就需要 在图片 ......
elementui 工具使用el-form嵌入el-input组件添加@change事件，点击回车键（enter）时整个页面会刷新，以下是阻止页面刷新的方式
解决页面刷新问题就是阻止el-form上默认的提交事件@submit.native.prevent <el-form ref="formRef" :model="getFormData" size="small" label-width="auto" @submit.native.prevent> ......
vue3 使用elementUI饿了么el-table组件 动态循环自定义表头列数据
在vue3上使用el-table组件自定义循环表头列； <el-table :data="list" v-loading="loading" border> <!-- @selection-change="handleSelectionChange" --> <!-- <el-table-colum ......
elementUI确认消息弹框区分取消和关闭按钮
预期效果： 说明：默认情况下，elementUI的确认消息弹框中取消按钮和右上角关闭按钮，走的是同一个方法，也就是catch方法的回调，如果项目中有区分，默认的是无法支持的。所以要重新配置一下，话不多说，上代码： //res.msg表示提示信息内容 this.$confirm(res.msg, '提 ......
elementUI button防止频繁点击
import Vue from 'vue' const preventReClick = Vue.directive('preventReClick', { inserted: function(el, binding) { el.addEventListener('click', () => { ......
elementui字符串和数字型单选框的区别
单选框的取值类型一般有两种，一种是字符串，一种是数字型。两者在使用上有区别 数字型 <el-radio :disabled="true" v-model="meetingType" :label="1" >线上会议</el-radio > <el-radio :disabled="true" v-m ......
ElementUI Checkbox 多选框 返回对象
checkBox和checkGroup通过v-model绑定的数据只能是number/string/Array 如何回调返回对象呢? 已知能返回label字符串,我们可以把label=对象id + ',' + 对象名称拼接, 然后返回,或者label=json字符串 再传出 每次选中操作后会回调返回 ......
Vue+ElementUI 下拉框问题的一个解决方案
Vue使用ElementUI使用下拉框组件时，点击空白处，无法隐藏展开的选项。build项目后，此类问题时有时无，不确定；具体报错如图 ......
基于 ElementUi框架的 table组件制作的 报表功能
<template> <!-- 月周计划报表 --> <div class="monthPlanForm"> <el-table :data="tableData" :span-method="spanMethod" style="width: 100%"> <el-table-column typ ......
关于elementui的cascader组件多个级联大量数据滚动定位样式导致卡顿问题
如题，多个cascader级联组件，下拉选项含大量数据，滚动时会有实时样式重新渲染，导致CUP内存溢满而卡顿 解决尝试：使用elementui中的内部源码方法处理 <script> import { addResizeListener, removeResizeListener } from 'el ......