![](https://img-blog.csdnimg.cn/20210701095913591.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
element
element ui 遇到的问题记录
alokka
前端劝退师
展开
-
element 合并单元格
element 合并单元格原创 2022-08-03 15:10:43 · 1793 阅读 · 2 评论 -
element-ui el-input type=“number“ 清除上下箭头
在全局 css 加上input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"]{ -moz-appearance: textfield;}原创 2022-01-27 19:38:31 · 772 阅读 · 0 评论 -
element-ui 引入图片的两种方式
1. require 引入<template> <img :src="require('@/images/lokka.png')"></template><script>export default { data () { return { } }}</script>2. import 引入<template> <img :src="imageSrc"></template>&原创 2022-01-19 13:48:02 · 4159 阅读 · 0 评论 -
element 验证多个表单
当做业务需求的时候,同时遇到一个 dialog 有两个表单,在提交的时候就要同时对两个表单进行表单校验,我刚开始就想到了验证嵌套,虽然也能实现,不过会有先后顺序的问题,不能同时进行校验,后来经过百度才发现 promise.all 方法可以实现我们的需求,直接上代码1. 验证嵌套this.$refs['form'].validate((valid) => { if (valid) { this.$refs['table'].validate((valid) => { i原创 2021-12-01 11:58:08 · 894 阅读 · 0 评论 -
element required动态响应
<el-form-item label="充值提醒:" prop="chargeWarn" :required="!!config.alarmThreshold ? true : false"> <el-checkbox-group v-model="config.chargeWarn"> <el-checkbox label="successPush">成功提醒</el-checkbox> <el原创 2021-09-11 10:26:46 · 757 阅读 · 0 评论 -
element 封装上一页、下一页翻页组件
turnPage.vue<template> <div> <el-pagination background :current-page="currentPage" :total="total" :disabled="disabled" layout="prev, next" prev-text="上一页" next-text="下一页" @prev-click="prevClick" @next-click="nextClick"> </el原创 2021-08-27 13:49:34 · 548 阅读 · 0 评论 -
element datepicker 设置不能选择一天 至少两天或多天
写业务过程中,遇到一个需求是不可以选择同一天的时间,比如 2021-8-13 - 2021-8-13,知道 datePicker 里有一个 disableDate 属性,不过之前都是用在一个时间范围,比如一个月之内或者一个星期之内,查了百度半天也没有好的解决办法,最后...原创 2021-08-26 15:31:50 · 2060 阅读 · 0 评论 -
element datetimerange 只能选择今天之前(不包括今天)
今天做需求,产品要求日期选择只能选择今天之前(不包括今天),就是比如今天是 2021-8-23 那就只能选择之前到22号,上百度查了下方法,发现有点小问题,网上的方法大多是 pickerOptions: { disabledDate: (time) => { if (timeOptionRange) { return time.getTime() > Date.now() - 1 * 24 * 60 * 60 * 1000原创 2021-08-26 14:55:23 · 1368 阅读 · 0 评论 -
element 修改组件样式
⭐️ 当我们用 element-ui 组件库开发时,时常会遇到想改变 element-ui 组件样式的需求,比如修改下按钮的样式等等,但是我们又防止当前组件样式污染全局,在当前组件 css 中用了 scope 属性来让当前组件的 CSS 只作用于当前组件中的元素,使用 scoped 后,父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件:1、stylus 的样式穿透 使用 >>><style scoped>.原创 2021-08-19 01:37:04 · 766 阅读 · 0 评论 -
element daterange datetimerange 自定义可选范围 限制选择多少天或者几个月
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <!--原创 2021-07-14 15:34:00 · 2017 阅读 · 1 评论 -
element 中 this.$message 在循环中提示多次解决办法
1. 总结让我们看下element UI Message源码把 message 的 DOM 结构添加到 document 中,我们可以通过document.getElementsByClassName(‘el-message’).length > 0来判断当前页面是否已存在Message2. 具体代码: // 多选 handleCheckbox (val) { if (val.length > 50) { if (document.getElemen原创 2021-07-12 18:05:26 · 1598 阅读 · 1 评论 -
element el-table radio 单选表格 / 表单实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <原创 2021-07-09 14:16:17 · 1139 阅读 · 0 评论 -
element v-for动态绑定数据 循环列表表单验证实现
1. 总结遍历的 el-form-item 数据 domains 为 el-form v-model 对象里的数据在遍历的 el-form-item 中添加rules,:prop="‘domains.’ + index + ‘.value’"<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2021-07-08 14:41:38 · 707 阅读 · 0 评论 -
element el-table嵌套input输入框动态添加行 form动态表单验证实现
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <!-- 引入样式 --> &原创 2021-07-08 10:57:52 · 3653 阅读 · 0 评论 -
element el-select change事件传 item 对象方法
如果 Select 的绑定值为对象类型,请务必指定 value-key 作为它的唯一性标识。在 el-option 里,我们传入 item 对象,然后在 el-select 中,我们用 value-key 接收,这样我们直接调用 change 方法就可以直接传入整个 item 对象,上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na.原创 2021-07-05 01:01:37 · 23943 阅读 · 2 评论 -
element table radio 单选表格实现
实际效果可以自行复制下面代码查看后续可以自己封装成 table 组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalabl.原创 2021-08-27 09:40:21 · 1315 阅读 · 0 评论 -
element table表单 默认选中多条数据 toggleRowSelection不起作用解决办法
这是因为created生命周期执行的时候 DOM 还没有渲染,el-table 表格还没有渲染完成 我们就直接使用了this.$refs.XXX.toggleRowSelection(item)方法,就不会生效。直接在外层套一层this.$nextTick()就可以了 this.$nextTick(() => { list.forEach((item) => { if (item.gasStatus === 1) { th原创 2021-07-04 23:08:53 · 2737 阅读 · 0 评论 -
element form 对单个或几个input、select表单校验
1. 对单个进行校验 this.$refs['form'].validateField('userName', async (valid) => { if (valid) return // code })2. 对几个进行校验 this.$refs['form'].validateField(['userName','mobileNumber'], async (valid) => { if (valid) return // code })...原创 2021-07-04 21:54:42 · 697 阅读 · 0 评论 -
element this.$confirm 显示多条数据
let confirmText = [ '请确定要将该张发票红冲?', `红字信息表编号:${this.redNumberList.redNumber}` ] const newDatas = [] const h = this.$createElement for (const i in confirmText) { newDatas.push(h('p', null...原创 2021-06-07 11:04:21 · 896 阅读 · 0 评论