element-ui
一直用element-ui写后台管理系统 习惯将遇到的问题记录下来
monkey-7
能复现吗?不应该呀,等我看看代码嗷!我本地没问题阿!清一下缓存试试呢!用的啥浏览器?我看看返回!!!
展开
-
el-select 下拉框点击某一禁选选项 按Esc关闭弹窗 下拉框无法收起问题
本来想的是监听dialog的Esc关闭事件 关闭时修改el-select-dropdown的css样式 将display = none。这里有个需要注意的点 blur事件 需要setTimeout包上否则会报错。看官网发现有个失焦事件 他手动触发失焦的话 会自动收起下拉面板原创 2024-03-26 11:17:34 · 759 阅读 · 0 评论 -
vue样式穿透>>> /deep/ ::v-deep 这仨的用法
比如我想改element的横线样式 (这时候style标签上是有加scoped)(1)>>> 它只支持原生css (sass或者less 有可能无法识别)(听说这小子编译速度快 我也不知道咋个快法 反正都能实现改UI组件样式)(2) /deep/ 适用于 sass或者less。下图是/deep/在vue3项目中使用报错的场景。我试了一下::v-deep在vue2里也能用。(3) ::v-deep 适用于vue3原创 2024-03-25 11:15:18 · 336 阅读 · 0 评论 -
el-date-picker 选择一个或多个日期
el-date-picker可选择多个日期 type=“dates” 加个s 此外还有多个月 type=“months” 多个年 type=“years”原创 2023-12-12 15:59:16 · 1087 阅读 · 2 评论 -
el-table操作栏按钮过多 增加展开/收起功能
el-table表格操作栏按钮过多增加展开/收起功能原创 2023-12-07 17:57:14 · 1481 阅读 · 0 评论 -
el-form-item表单根据后台返回的数据项展示校验错误信息
el-form error属性 动态设置表单验证状态变为error 红框高亮 并显示错误信息原创 2023-12-06 17:42:42 · 1191 阅读 · 1 评论 -
Cannot read properties of undefined (reading ‘resetFields‘)“ 报错解决
因为还没渲染出 所以用$refs调用名叫‘dataForm’身上的resetFields方法 是undefined。此方法作用:对整个表单进行重置 将所有字段值重置为初始值并移除校验结果。解决方法: 使用$nextTick包上 等待dom更新之后再重置原创 2023-11-21 16:28:48 · 2221 阅读 · 0 评论 -
el-table切换页面时固定列操作栏里的按钮下方多出一条线
解决方法:给table加类名class=“table-fixed-class”是因为使用了fixed属性导致的原创 2023-01-13 15:25:13 · 541 阅读 · 1 评论 -
element-plus + vue3.0 step 步骤条 插槽的使用
vue3.0的项目 如果仍用slot-socpe写法使用插槽会报错 ‘slot-scope are deprecated’ (槽作用域已弃用)项目改为vue3 之前的vue2步骤条写法失效。只能用template。原创 2022-12-27 14:57:28 · 7398 阅读 · 0 评论 -
el-form动态表单切换显示/隐藏导致的校验报错
el-form 的el-select change事件 控制el-card里包裹的 el-tab-pane 表单 显示/隐藏原创 2022-12-27 14:31:29 · 2277 阅读 · 6 评论 -
el-table tree 默认展开一级
获取树之后遍历 将ID push到数组中 此处Array里面存放key的字符串 而不是number。我之前的element-ui版本为2.0.4 而表格树默认展开功能是要版本2.9.0以上才支持的。这几个属性 虽然有表格树的效果 但是默认展开这件事是没反应的 研究了好久才发现是版本问题 感到气气。在table中要设置 row-key expand-row-keys绑定一个key的数组。要求是一个表格展示树形数据,默认展开一级。原创 2022-12-27 13:51:36 · 3916 阅读 · 0 评论 -
el-input $event事件对象 使用js修改target.value时 v-model同步更新
el-input 传入事件对象 $event 修改target.value v-model不同步更新的问题 el-input 填写数值 保留2位小数 并自动补0原创 2022-10-24 16:47:15 · 2019 阅读 · 1 评论 -
el-table 用formatter 将接口返回的 多个数字类型的字符串 转换成对应汉字
element-ui的表格 el-table 使用formatter 对传入的数据进行自定义的格式化,截取字符串内的数字 转换成对应汉字原创 2022-07-13 16:52:41 · 1332 阅读 · 0 评论 -
element-ui 如何修改默认样式
例如el-form修改默认label样式 同样也适用于el-table样式修改 方法都相同 换汤不换药原创 2022-03-14 16:13:31 · 10205 阅读 · 4 评论 -
el-table根据表格某属性改变整行的颜色
:row-style="changeRed" 根据表格的某个属性改变整行的颜色原创 2021-12-02 11:42:11 · 6489 阅读 · 4 评论 -
关于element-ui 下拉框select 编辑弹窗打开时 触发change事件解决方法思路
change是下拉框值变换时就触发 由于编辑是从无到有的过程 所以他默认为 证件类型 被修改了 继而清空idnum 证件号码解决方法有两个1: 给falg标识 默认为0 第一次打开是 flag = 0 不执行 change过后flge++ 提交按钮flag=02: 阅读官方文档发现 el-select 有个叫visible-change的事件是 根据下拉框打开关闭触发的此函数里面传递两个参数(第一个为回调参数, 第二个为自定义的参数)例如报送项目中 日期类型 visible-change($eve原创 2021-10-09 13:41:01 · 6765 阅读 · 0 评论 -
el-input 输入框回车刷新页面问题
偶然间发现的 弹窗里的el-input 输入后 回车 会导致整个页面刷新由于项目是刷新就回首页 所以看起来奇奇怪怪的研究研究:发现如果 el-form表单里只有一个el-input的时候 点回车 就会触发刷新页面解决方法:在<el-form 上加 @submit.native.prevent>...原创 2021-10-09 11:57:18 · 943 阅读 · 0 评论 -
el-table表格 v-if 切换后 窜位问题
刚开始想到的解决方法是tab切换时 v-if 重新加载整个表格但是在column上加属性 key=“1” key=“2” 给表格添上标号(我觉想当于给每行表格起小名了 小张 小王 这样重新加载就不会出现乱篡位了)原创 2021-07-07 14:09:05 · 569 阅读 · 0 评论 -
为啥项目里用element-ui 的el-drawer抽屉 日历组件不好使
项目新功能需要用到抽屉 但是直接使用el-drawer报错 升级了element-ui也没用这个项目element-ui 版本是2.8.2没有日历 抽屉等组件(项目模版一直用的公司之前的)但是更新element-ui后 仍然没有报错 未注册 就是找不着不认呗 网上查少有类似发现 src下的element-ui index文件从element-ui里 import了一些插件 eg:分页 弹窗这种并没有引入最新版本的这些插件例如 弹窗 Vue.use(Dialog) 还要注册一下才行他原创 2021-07-07 14:04:40 · 1631 阅读 · 0 评论 -
el-date-picker 控制选择范围中的箭头函数
element-ui 的el-date-picker日期选择器有一天我想整个控制只能选择今天之前的日期选择器但是:picker-options咋写都不对然后发现是没有用箭头函数的原因disabledDate(time) { // 这里面是拿不到data里this.某某的 (会报错undefined)}disabledDate:(time) => {// 但是箭头函数 可以拿到data里的this.某某}箭头函数没有自己的this它的this是继承而来 默认指向定义他时所原创 2021-07-06 15:56:30 · 528 阅读 · 0 评论 -
el-table的纵向合并 横向合并 表头合并
关于el-table的合并单元格(常规的 纵向合并和野路子横向合并 外加表头合并)表格大概长这样 ↑通过给table 传入span-method方法可能实现合并行或列 方法的参数可以是一个对象,里面包含当前行row当前列column当前行号rowIndex当前列号columnIndex四个属性该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan 第二个元素代表colspan 也可以返回一个键名为rowspan和colspan的对象(这段话是在哪抄的被我摘到笔记里了)原创 2021-05-20 17:05:06 · 3493 阅读 · 0 评论 -
el-select下拉框不同证件类型校验思路
vue+element ui需求:分为个人证件类型和企业证件类型,例如个人的:身份证、户口本、护照等,企业的:组织机构代码、统一社会信用代码。根据选择不同的证件类型需要有相对应的证件号码校验规则思路:1、el-select触发change事件时 拿到当前选择的证件类型码值 eg:“129999” 居民身份证(每种证件类型有自己的码值)2、写个公共方法 传入证件码值type 根据不同码值 返回相应的校验规则ruleType eg:“IDCard” 走不同正则 报不同错3、(将"IDCard原创 2021-07-06 16:31:01 · 1448 阅读 · 0 评论