ElementUI
平时痴绝,烂烂风月。
卿卿qing
这个作者很懒,什么都没留下…
展开
-
【ElementUI】el-table 的表头和内容列不对齐
el-table 表头和内容列错位原创 2022-08-30 15:32:00 · 2107 阅读 · 0 评论 -
【Element UI】el-upload 踩的坑
el-upload 上传文件并显示进度条原创 2022-06-16 17:39:52 · 2711 阅读 · 2 评论 -
【elementUI】el-form-item 动态绑定rules校验规则
el-form-item 动态校验rules规则原创 2022-06-06 13:40:52 · 6701 阅读 · 2 评论 -
【ElementUI】el-table表头宽度自适应方法
<el-table-column prop="PPAPTaskNum" :label="st('publicCustom.PPAPTaskNo')" :width="getHeaderWidth('PPAP任务号')" show-overflow-tooltip></el-table-column>// 表头宽度自适应的方法getHeaderWidth(title) { // show-overflow-tooltip return title.lengt原创 2022-04-08 16:06:58 · 2282 阅读 · 1 评论 -
【JavaScript】去除空格
el-date-picker 显示当前时间,每次点开弹框都是当前的时间。<el-form-item label="创建时间" :label-width="formLabelWidth"> <el-date-picker v-model="addForm.createDate" style="width:100%" type="datetime" placeholder="选择日期" /></el-form-item&g原创 2022-04-01 20:08:05 · 1729 阅读 · 0 评论 -
【el-dialog】解决同一组件使用俩个el-dialog,内容被遮罩层覆盖的问题
出现问题如下,内容被遮罩层覆盖如果需要在一个 Dialog 内部嵌套另一个 Dialog或者同一组件有多个Dialog时,需要使用 append-to-body属性。原创 2022-02-28 10:51:57 · 5944 阅读 · 0 评论 -
【vue3.0 + element-plus】el-table-column空数据时展示“--“
<el-table-column prop="name" label="姓名" width="120"> <template v-slot='scope'> <span>{{scope.row.name|| '--'}}</span> </template></el-table-column>原创 2021-12-24 15:41:18 · 2380 阅读 · 1 评论 -
vue3.x 使用$refs未定义,Cannot read property ‘$refs‘ of undefined
1. 场景:el-form 表单校验获取ref未定义2. 解决方法:vue3.x 中setup使用箭头函数,获取this失败,不使用箭头函数2.1 js 代码function sureBizOrg (busAreaRef) { this.$refs[busAreaRef].validate((valid) => { if (valid) { doing() } else { doing() } })}...原创 2021-10-15 15:31:41 · 7826 阅读 · 0 评论 -
elementui 去除 el-form 表单校验提示信息 clearValidate
JS 代码function cancelBizOrg (busAreaRef) { this.$refs[busAreaRef].clearValidate()}原创 2021-10-15 15:25:28 · 1642 阅读 · 0 评论 -
vue修改elementui表格el-table选中行的高亮色highlight-current-row
css 代码::v-deep .el-table__body tr.current-row>td { color: #fff; background: #409EFF!important;}原创 2021-10-14 17:38:47 · 6991 阅读 · 3 评论 -
vue解决elementui消息弹出框ElMessageBox动态内容换行问题
1. 实现效果2.解决方法: 使用模板字符串 + br 标签换行 + dangerouslyUseHTMLString 属性2.1 JS处理const deleteBusArea = () => { ElMessageBox({ title: '提示', message: `${busArea.deleName}有${busArea.deleSonNumber}个下属区域,删除后其下区域将一并删除<br/>${busArea.deleName}或其下属区域下存在原创 2021-10-14 17:34:52 · 6928 阅读 · 0 评论 -
vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
1. 出现问题bug: el-cascader控件 最后一级出现空白 暂无数据2. 解决办法: 使用递归的方式,将最底层中的 children 设为 undefined2.1 html代码<el-cascader v-model="busAreaForm.codeUp" placeholder="请选择" :options="codeUpList" :props="{ checkStrictly: true }" show-all-levels></el-ca原创 2021-10-14 17:26:34 · 2419 阅读 · 1 评论 -
Element el-table树形数据 tree-props使用注意事项
亲测有效原创 2021-08-28 09:54:34 · 3782 阅读 · 0 评论 -
实现 el-input 输入值,模糊搜索显示下拉选项功能代码
<el-autocomplete class="inline-input" v-model="scope.row.proId" :fetch-suggestions="proIdSearch" placeholder="请输入内容" @select="proIdSelect"></el-autocomplete>data() { return { restaurants: [], }}// 1. 先获取数据getProductList() { .原创 2021-03-02 15:07:21 · 2852 阅读 · 1 评论 -
ElementUI el-input 设置 type 类型为 number 时,如何去掉上下指示箭头
主要是设置 css 样式input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }原创 2020-10-26 18:50:24 · 3836 阅读 · 2 评论 -
Vue + ElementUI 给el-table添加点击事件
分俩种情况实现点击事件针对整行点击 @row-click=""<el-table :data="userList" highlight-current-row border @row-click="handleSeleUserId"> <el-table-column prop="id" label="UID" align="center" /></el-table>针对单行的每单元格点击 @click="原创 2020-09-23 15:24:14 · 10776 阅读 · 1 评论 -
Vue + ElementUI el-input框有值时无法输入
<el-input v-model="bindPar.profession" placeholder="擅长领域" clearable/>当 bindPar.profession 有值时,输入框无法修改值解决方法 this.$forceUpdate()<el-input v-model="bindPar.profession" placeholder="擅长领域" clearable @input="change($event)"/>chan原创 2020-09-22 20:39:27 · 673 阅读 · 0 评论 -
自定义 elementui 的样式,实现样式穿透
出现的情况:组件内引用第三方组件,不加scoped,第三方组件设置的样式生效,页面可以显示内容,加了scoped,页面内容不显示解决方案:引用了第三方,scoped加了局限性,样式不会进行穿透// 使用less用>>>进行穿透>>> .video { .video-player { .vjs-fluid { width: 390px; height: 690px;原创 2020-06-16 14:30:17 · 1295 阅读 · 0 评论 -
如何解决el-table出现一条线
解决方法.el-table::before { z-index: inherit;}原创 2020-08-27 15:07:24 · 2524 阅读 · 0 评论 -
ElementUI:关于 el-form 必填项的校验规则
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"> <el-form-item label="联系方式" prop="mobilePhone" /> <el-form-item label="电子邮箱" prop="email"原创 2020-07-29 17:24:38 · 1395 阅读 · 0 评论 -
element-ui 循环遍历 el-select 时,如何正确绑定 v-model
通过 ind 唯一性,来判断是哪个select<div v-for="(el,ind) in uploadMusiceInfo.tag" :key="ind" style="display: inline-block"> <el-select v-model="uploadMusiceInfo.innerTagVal[ind]" :value="el.id" multiple clearable :placeholder="e.原创 2020-07-27 19:25:28 · 6252 阅读 · 2 评论 -
element-ui 解决 el-select 设置默认值后无法切换选项
原因:select已经绑定了值,render函数没有自动更新,数据刷新了但是视图没有刷新解决方法:使用this.$forceUpdate()重新render<el-select v-model="ruleForm.region" placeholder="请选择角色" @change="handleSelectChange"> <el-option v-for="item in roleOption" :key="item.id"原创 2020-07-16 14:58:23 · 3822 阅读 · 6 评论 -
解锁新技能:如何去除element-ui中el-drawer标题自带蓝色框
通过穿透样式来修改:focus的属性/deep/ :focus { outline: 0;}原创 2020-07-16 14:31:21 · 2719 阅读 · 0 评论 -
el-input输入框输入内容同时不清空placeholder
实现el-input的placeholder失去焦点或获得焦点时都不清空<el-input type="text" placeholder="回复xxx:" :placeholder="dialogInfo.placeNick" :onfocus="dialogInfo.placeNick" :onblur="dialogInfo.placeNick" />原创 2020-07-11 17:32:53 · 1831 阅读 · 2 评论 -
el-table实现点击某行高亮(修改背景色)
添加属性<el-table highlight-current-row />设置样式.el-table__body tr.current-row>td{ background-color: #69A8EA !important; color: #fff;}原创 2020-07-07 21:37:48 · 3280 阅读 · 1 评论 -
使用el-pagination实现翻页自动回到顶部
定义$scrollTo方法挂载在vue全局// main.jsVue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => { window.scrollTo({ top: x, left: y, behavior: type // 滚动行为:smooth平滑滚动,instant瞬间滚动,默认值auto,等同于instant })}// 使用方法this.$scrollTo()...原创 2020-06-16 11:00:14 · 2793 阅读 · 0 评论 -
Element-UI 按需加载
下载插件 babel-plugin-component在 .babelrc 里配置 plugins"plugins":[ "transform-vue-jsx", "transform-runtime", [ "component", { "libraryName":"element-ui", "styleLibraryName":"theme-chalk" ...原创 2019-07-09 18:45:17 · 2157 阅读 · 0 评论