elementui
赫兹/Herzz
驯服野生bug中......
展开
-
VUE3+elementPlus 之 Form表单校验器 之 数字类型、小数位数校验
封装自定义验证器:组件内使用:页面效果:非数字:小数点后无内容:超过限制小数位数:超过最大值:原创 2024-02-01 14:15:00 · 1318 阅读 · 0 评论 -
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
可以看到我们自定义name长度为120,当用户输入超过120会出现error提示,并实时显示用户输入的字符长度,可以无限输入但是无法通过校验。新建js文件写入下面的函数。原创 2022-09-21 16:53:06 · 3434 阅读 · 0 评论 -
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项);勾选列表之外的节点,列表节点自动勾选(如果取消列表勾选,其他同级节点全部自动取消勾选),单独操作列表节点可正常勾选反选,亲测有效。原创 2022-08-25 08:46:48 · 2465 阅读 · 4 评论 -
VUE element-ui之el-tree树形控件获取最后一级节点(无子节点的节点)
VUE element-ui之el-tree树形控件获取最后一级节点(无子节点的节点)原创 2022-08-22 08:40:33 · 5401 阅读 · 3 评论 -
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线原创 2022-08-11 15:19:12 · 6151 阅读 · 2 评论 -
VUE element-ui之el-form表单非必填内容格式校验
需求:手机号码非必填,校验其格式。可以看到非必填且校验了格式。原创 2022-08-03 09:43:13 · 1999 阅读 · 0 评论 -
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除原创 2022-07-01 16:25:51 · 11012 阅读 · 4 评论 -
VUE element-ui下拉菜单el-select获取label值或value的值
步骤:举例:select数据格式为:options: [ { value: '1', label: '黄金糕' }, { value: '2', label: '双皮奶' } ]一:label的获取1.定义事件<el-select v-model="form.receivePaymentCustomerId" placeholder="请选择" size="small" filterable @change="custo原创 2022-04-27 20:32:00 · 7833 阅读 · 1 评论 -
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
直接上封装的dialog组件代码<template> <div> <el-dialog title="原片采购详情" class="Deviceslist_eldialog" width="978px" height="534px" :visible.sync="dialogVisible" :before-close="detailsCancel" > <el-d原创 2022-04-01 08:39:09 · 2053 阅读 · 1 评论 -
VUE element-ui之上传身份证照片正反面详细代码
步骤:定义上传组件:<el-col :lg="6"> <el-upload class="avatar-uploader" action="#" :auto-upload="false" :show-file-list="false" :on-change="changePictureUploadIDFront"> <img v-if="imageUrlFront" :src="imageUrlFront" cla原创 2022-03-22 15:45:51 · 6806 阅读 · 9 评论 -
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
步骤:封装验证规则:export function isvalidPhone(phone) { const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/ return reg.test(phone)}表单中定义验证: <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small">原创 2022-03-17 11:21:26 · 4045 阅读 · 1 评论 -
VUE element-ui之table表格全选框(复选框)隐藏
步骤:简单粗暴,先为表格加类名:<el-table ref="table" v-loading="crud.loading" :data="crud.data" class="order" border style="width: 100%;" :header-cell-style="{padding: '',background:'#F6F7FC',color:'#333333', textAlign: 'cen原创 2022-03-15 08:14:35 · 3659 阅读 · 0 评论 -
VUE element-ui之输入框限制只能输入数字number类型及表单校验
步骤:表单中:<el-form ref="ruleForm" :model="form" :rules="rules"> <el-form-item label="上级地区:" prop="region" :label-width="formLabelWidth"> <el-cascader v-model="selectedOptions" :options="option原创 2022-03-10 14:41:37 · 5625 阅读 · 1 评论 -
VUE element-ui 之table表格全选框居中对齐
步骤:默认的全选框是左对齐,加了align=“cnter”之后发现table内容复选框居中,header错位<el-table-column type="selection" width="55" align="center" />全局样式中加入:.el-table--border .el-table__cell:first-child .cell { padding: 0原创 2022-02-16 11:13:05 · 2909 阅读 · 1 评论 -
VUE-element-admin之配置多级路由菜单
步骤:roters.js中添加如下代码:{ path: '/usermanagement', alwaysShow: true, //是否显示父级:如果为false则只显示最内层菜单(默认false) component: Layout, hidden: false, //是否显示 redirect: 'noredirect', name: '用户管理', meta: { title: '用户管理', icon: 'Steve-Jobs', a原创 2022-02-15 15:31:21 · 3586 阅读 · 0 评论 -
VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)
需求:鼠标悬停浅色背景,勾选复选框选中行深色背景步骤:<el-table id="excel_table" ref="table" class="order" border height="80vh" :summary-method="getSummaries" :show-summary="true" :data="Data"原创 2022-01-18 08:44:39 · 3309 阅读 · 3 评论 -
VUE-element-admin菜单栏图标选中状态跟随文字颜色状态变化
问题:ui给的svg图标引入侧边栏后不跟随文字颜色状态变化分析svg图标代码后,找出问题所在:svg图标自带样式导致解决方法:简单粗暴!!!直接删掉fill看效果:完美解决。原创 2022-01-14 11:18:11 · 1070 阅读 · 0 评论 -
VUE-element-admin之一二级菜单选中状态保持
项目需求:一级二级菜单选中后始终保持选中状态,部分二级菜单隐藏情况下也保持一级二级菜单选中步骤:分析了el-admin源码,只需判断当前页面菜单是否要保持其他菜单选中即可先找到修改文件:js处判断:...原创 2022-01-14 10:05:12 · 1298 阅读 · 3 评论 -
VUE element-ui 之table表格双表头、表头内插入输入框
步骤:模板部分:就是在表头中嵌套表头,slot="header"是重点,两个表头内label、prop需一致,否则表格内容不显示 <el-table-column type="selection" width="55" align="center" :selectable="checkboxT" > <el-table-column原创 2022-01-12 19:45:44 · 4045 阅读 · 1 评论 -
VUE element-ui 之清除form表单验证
步骤:<el-form ref="form1">this.$refs['form1'].resetFields()在需要清除验证的方法中定义即可原创 2022-01-10 17:55:17 · 828 阅读 · 1 评论 -
VUE element-ui 之时间格式转时区格式
步骤:模板:<el-date-picker v-model="createTime" type="daterange" :clearable="false" range-separator="-" style="width: 210px" start-placeholder="开始日期" end-placeholder="结束日期"原创 2022-01-10 12:46:59 · 1750 阅读 · 0 评论 -
VUE element-ui 之table表格第一行插入输入框
步骤:模板中配置列:<el-table-column label="序号" width="70" align="center"> <template slot-scope="scope"> <div v-if="scope.$index == 0" /> <div v-else>{{ (scope.$index) }}</div> </template> </el-table-column&g原创 2022-01-07 17:46:40 · 4240 阅读 · 2 评论 -
VUE element-ui 之table表格表头插入输入框
很简单:<el-table-column prop="create_time" label="时间" width="120" > <template slot="header" slot-scope="scope"> 重点是slot="header" <el-select v-model="value"原创 2022-01-07 15:08:45 · 2276 阅读 · 1 评论 -
VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据
需求:1. 发货数量默认为0,用户可自行输入;2. 点击复选框将未发货数动态赋值给发货数,取消复选发货数为0;3. 点击全选框将每行的未发货数赋值给对应发货数,取消全选发货数为0。实现步骤:画重点:1.模板定义<el-table v-show="order" ref="multipleTable" :v-loading="loading" border :data="tableDataOrder" height="69vh" style="width: 100原创 2022-01-06 11:58:33 · 2773 阅读 · 3 评论 -
VUE element-ui 之table表格导出Excel功能封装(纯前端实现)
需求:导出当前页面所有数据步骤:下载所需依赖:npm install --save xlsx file-saver引入依赖:这里我进行了封装,由于很多页面都需要导出excel功能js文件中引入依赖,进行导出方法封装:import FileSaver from 'file-saver'import XLSX from 'xlsx'const utilWay = { // 导出excel exportExcel(id, excelName) { //方法接收两个参数:table表格的原创 2021-12-31 15:17:39 · 1276 阅读 · 0 评论 -
VUE element-ui之table表格横向展示(表尾汇总)
产品需求:在正常表格下方进行一系列汇总(如:合计等),分析之后发现需要拼接一个或多个横向排列的表格。实现步骤:模板部分: <el-table :data="DataBefore"> <!--此处为正常纵向表格,直接将横向表格拼接在下方--> </el-table><!-- 合计 --> <section> <el-table :show-header=原创 2021-12-31 13:27:04 · 10447 阅读 · 2 评论 -
VUE element-ui之table表格遍历渲染
步骤:定义模板:<el-table-column v-for="(item, index) in tableList" :key="index" :prop="item.prop" :label="item.label" :show-overflow-tooltip="true"//文字过多隐藏/>定义表头:data() { return{ tableList: [ { prop: 'unit_price', label: '单价'原创 2021-12-07 13:39:05 · 5345 阅读 · 0 评论 -
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
步骤:表格中直接插槽法:<el-table-column :show-overflow-tooltip="true" prop="number" label="发货数量"> <template slot-scope="scope"> <el-input v-model.number="scope.row.number" @focus="onfoucs(scope)" @blur="blurUsern原创 2021-11-25 14:23:13 · 2243 阅读 · 0 评论 -
VUE element-ui之table表格勾选复选框动态合计某列的值
实现步骤:自定义数组对象合计方法:countTotal(arr, keyName) { let $total = 0 $total = arr.reduce(function(total, currentValue, currentIndex, arr) { return currentValue[keyName] ? (total + currentValue[keyName]) : total }, 0) return $total原创 2021-11-14 15:25:55 · 1686 阅读 · 0 评论 -
VUE element-ui之table表格勾选功能(只能勾选某列值相同的行)
产品要求:表格可多选,且只能勾选客户名称相同的行。实现步骤:表格内配置:<el-table border :data="Data" @selection-change="selectionChangeHandlerOrder"> <el-table-column :selectable="checkboxT" type="selection" width="55"原创 2021-11-09 16:03:24 · 2909 阅读 · 1 评论 -
VUE element-ui之使用外部图标---iconfont篇
步骤:1、进入iconfont官网传送门并使用任意方式登录。2、按如下步骤进行:3.图标库建好后直接搜索自己需要的图标按如下步骤:4、将文件解压后,在项目assets下新建文件,将解压文件放入5、在main.js中引入:import './assets/icon/iconfont.css'6、在标签中使用类名引入图标:<el-button style="margin-left: 4px" class="filter-item iconfont icon-zhuan原创 2021-10-28 10:47:55 · 2485 阅读 · 3 评论 -
VUE element-ui之导入excel模板至后端接口
步骤:按钮外包裹上传组件 <el-upload ref="upload" class="filter-item" action="#" :before-upload="beforeUpload" type="primary" :http-request="uploadOk"原创 2021-09-18 15:37:37 · 4086 阅读 · 11 评论 -
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
问题:局部全屏后el-popover弹出框失效解决方法:<el-popover placement="bottom" :append-to-body="false"//禁止内容追加至body即可 width="200" trigger="hover" > <div> 雷达图指标解释说明:<br> 业务量:代表司机近一年内运输收入的原创 2021-08-17 19:42:19 · 4457 阅读 · 3 评论 -
VUE enement-ui之table表格隐藏滚动条
只需修改样式即可: /deep/.el-table__body-wrapper::-webkit-scrollbar{ width: 0; }注意:element-ui表格很多样式修改都需要加深度穿透才能生效。效果图:原创 2021-08-06 16:03:22 · 3883 阅读 · 2 评论 -
VUE element-ui之el-table表格内嵌进度条功能实现
步骤:el-table中使用插槽方法:<el-table-column prop="num" label="里程数" sortable="" width="250" > <template slot-scope="scope"> <el-progress type="line" :percentage="(scope.row.num)/原创 2021-08-03 14:59:09 · 5608 阅读 · 0 评论 -
VUE element-ui之table表格自增序号(前端实现)
需求:表格第一列为自增序号(不受分页影响)实现方法:<el-table-column label="序号" width="70" align="left"> <template slot-scope="scope"> {{ (scope.$index+1)+(currentPage-1)*pageSize }} </template> </el-table-column>注原创 2021-07-29 11:35:43 · 8446 阅读 · 0 评论 -
VUE element-ui之页面全屏时el-select下拉菜单不显示问题解决
问题原因:elemrnt-ui会默认将弹出框插入至 body 元素;当设置了某个元素全屏时,会遮挡住原来的select下拉数据。解决方法: <el-select v-model="value" placeholder="区域选择" :popper-append-to-body="false" //加入此行代码,完美解决 >...原创 2021-07-27 15:17:34 · 5366 阅读 · 4 评论 -
VUE element-ui之table表格全局排序、调用后端接口排序功能
步骤:标签中定义排序方法:<el-table ref="reset" v-loading="loading" :data="tableData" height="520" border @sort-change="sortChange" >要排序的字段定义排序关键字sortable : <el-table-column prop="sumNum" label=原创 2021-07-14 09:36:32 · 3294 阅读 · 0 评论 -
VUE element-ui之table表格分页完整功能
步骤:表格底部导入分页组件: <el-pagination :current-page.sync="currentPage" :page-size="pageSize" background layout="prev, pager, next, total, jumper" :total="totalData" @current-change="handleCurrentChan原创 2021-07-14 09:19:27 · 660 阅读 · 0 评论 -
VUE element-ui之table表格表头下拉筛选功能
步骤:在需要筛选的列中插槽法:<el-table-column prop="mount" label="交易量区间" align="left"> <!-- eslint-disable-next-line --> <template slot="header" slot-scope="scope"> <el-dropdown trigger="click" size="medium " @comma原创 2021-07-09 14:17:32 · 2815 阅读 · 0 评论