- 博客(19)
- 问答 (7)
- 收藏
- 关注
RSS订阅原创 使用element-ui中的el-form和el-table嵌套实现表格内容编辑并提交表格表单数据校验(可以对勾选到的表格内容必填校验+勾选框)
表格内有表单项支持编辑、保存时能对复选框勾选的部分表格数据进行表单校验
2023-08-23 11:56:28
16332
11
原创 Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘resetFields‘)“
Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'resetFields')"
2023-05-24 15:01:10
1090
原创 el-table动态渲染表格列el-table-column且里边嵌套el-popover弹出框语法
总结下表格中每列的动态渲染实现语法：vue + element<el-table> <template v-if="columns.length > 0"> <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label"> <template slot-scope="sco
2022-05-15 21:10:49
4272
2
原创 el-select下拉选项的数据源分别是数组或对象时v-for遍历的用法
在使用element ui 中的 el-select选择器组件时，通常我们会使用v-for遍历数据作为选择器的下拉选项赋值，通常遍历的数据为数组，但有时后端返回我们的数据是对象的话也是可以用来充当下拉选项的数据源的。element 官网中的例子是遍历的数组：如下<el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.valu
2022-01-29 11:31:12
11605
3
原创 el-date-picker 点击叉号清空事件后，v-model绑定的值变为null 此时以此条件查接口报错
在用element 中el-date-picker 日期选择器时，如果操作时将日期组件中选择的时间点后边的叉号清空那么此时v-model所绑定的值会变为null 并且无法传递给后端时间字段，如果此时以此参数做判断处理数据时页面会报错this.FormDate.startTime = this.FormDate.tradeTimeStr.length ? this.FormDate.tradeTimeStr[0] : '';this.FormDate.endTime = this.FormDate.tr
2021-12-28 17:10:33
3693
原创 element 表单 resetFields（）方法报错Cannot read properties of undefined (reading ‘indexOf‘)
项目中有个详情页点进去之后页面一直在加载报了这个错，看了提示是跟element 表单清空有关项目中在初次进入页面调用了this.$refs['ruleForm'].resetFields();这个方法，跟着检查了一遍页面中的表单项发现有一个表单项只是为了显示label名称占位没有绑定prop值，如下<el-form-item label="附件">推测是这里出的问题，那么我就把这个el-form-item给删了用了一个div替换并加上了样式结果就没有问题了。因为是刚来接收别人留.
2021-12-24 16:21:49
4032
6
原创 用vscode上面终端打开前端项目报错npm ERR code ENOENT npm ERR syscall open
在用vscode上面终端打开前端项目时报错如下其原因是进错了目录因为工作区放了很多不同分支的项目点开工作区的某个项目选中其中某个文件右键选择在集成终端中打开就不容易出错了此时在终端中输入命令npm run serve 即可运行项目...
2021-11-26 16:16:16
1405
原创 element 表单中英文混合输入长度校验
由于数据库的编码格式的不同，一个汉字在数据库中需要占 2-3 个字节。但英文和数字还是占一个，此时前端如果给表单输入的内容做长度校验就需要考虑汉字长度和字母长度在数据库中的字节比例了。下边以一个中文代表5个字节为例1.为form表单绑定rules属性 <el-form :rules="rules"> </el-form>给表单项绑定需要校验的字段prop <el-form-item prop="accountN
2021-11-12 17:25:07
2405
原创 vue项目中自定义el-table-column的表头和表内容
最近需要做一个el-table的树形表格，并且需要这个表格前几列有序列号，复选框和折叠的功能，讲到这里功能还是很常规的，但是注意后边有个要求：列表折叠的部分也就是子节点前方不展示复选框不能被勾选，并且子节点不算在排序当中。此时如果表格中还是用定义排序列、定义复选框列是行不通的。操作如下：第一：排序 此时需要在后端返回的数据中往父节点插入一个字段来定义充当索引序列，或是后端往返回的树形数据父节点添加一个排序的字段只有父节点有的。然后我们用这个字段来显示排序。这里是后端同事给返回的数据父节点加了一个in
2021-11-11 18:53:00
12909
原创 Cannot read properties of undefined (reading ‘split‘)
在vue项目中需要将获取的时间数据 "2021-10-25 02:10:20"渲染到表格中但要转换格式只要前边日期不要后边的时间：这种2021-10-25， 所以用split来截取了但此时页面会报错无法读取为定义的属性split后来发现是这个checkTime字段的值有时可能为空[Vue warn]: Error in render: “TypeError: Cannot read property ‘split’ of undefined”最后更改下写法即可...
2021-10-28 09:29:18
11272
1
原创 前端实现Excel导出的三种方式
1.点击链接数据、文件格式全部在后台封装好，返回给前端一个链接，前端通过点击链接自动下载，两种方式：（1）window.location.href = ‘url’（2）直接调用后端给的接口2.解析后台返回的文件流这种方式就是后台将要导出的文件以文件流的方式返回给前端，前端通过blob去解析，再动态创建a标签。```javascriptlet content = res.data; // 文件流let blob = new Blob([content]);let fileName = 'f
2021-06-26 17:38:59
13271
原创 前端利用el-upload实现Excel导入
首先说明一下这里前端只是前端利用el-upload上传了Excel文件，excel的解析工作是由后端同事利用阿里的easyexcel来解析的，所以说这个方法只适用于后端解析excel的方式。下边是效果图：可以点击上传Excel也可以拖拽，样式可根据个人需要修改。下边是组件代码：<template><div class="upload-excel"> <el-upload drag class="upload-demo"
2021-06-26 17:23:32
1984
原创 el-upload上传视频参考
组件代码<!-- 上传封面视频的对话框 --> <el-dialog title="封面视频" :visible.sync="addvideoDialog" width="30%" > <el-form ref="videoFormRef" :model="videoForm" label-width="90px"> <el-form-item label="封面视频">
2021-05-27 16:53:09
3843
1
原创 el-table中某一列的图片数据需要调其它接口获取渲染
第一次碰到做一个表格需要调两个不同接口的数据来渲染很蒙蔽下边上图如图所示本来渲染一个表格我们调接口获取数据后给表格项的prop赋值就行的，今天碰到个例外上边这个表格的数据已经通过一个接口渲染出一大部分了，最后还剩下一个推广码的位置上没有数据，后端的同事说这一列数据需要调另一个接口才能获取到而且还要携带一个参数id，这个参数id就是从第一次渲染这个表格的接口中获取到的。不知道大家有没有碰到过这种情况反正我是不理解一个表格为什么要调两个接口渲染。而且这一列的数据是个图片地址没有对应的字段，鼓捣半天也没显
2021-05-22 16:27:50
1512
2
原创 el-table用formatter格式化指定列的值单独处理某一列的数据
今天在渲染一个表格的时候出现了一列数据需要单独处理的情况下如下图正常情况下其他列的数据都渲染出来了，维独下单总数量数据特殊需要单独处理如下图请求回来的数据中 orderDtos是我要渲染表格的数据数组，问题就出在这个下单总数量这个字段num跟其他字段不在一个层级嵌套的更深，而且还是json数据类型，所以如果还像以往只在标签中定义prop的值是行不通的，这里需要用formatter格式化指定列的值单独处理某一列的数据，用法如下在标签中定义formatter的方法来格式化当前列的数据然后在m
2021-05-14 16:52:17
3598
原创 Invalid prop: type check failed for prop “data“. Expected Array, got Object found in
今天在渲染一个表格数据的时候数据获取到了并且也已赋值但却没有渲染出来并提示了报错，如下图这里的报错提示data是一个无效的数据类型，期望是数组得到的是对象。后来发现我们定义的用来渲染表格的数据是数组，但获取到的数据是对象，就像下边这样直接把对象赋值给数组就会得到一个错误的数据类型。下边是获取到的数据data后来尝试过将获取到的对象转数组再进行复制但嫌麻烦索性直接就push到数组中了这样数据类型就正确并渲染出来了，下边为遍历对象push到数组中也可以...
2021-05-03 17:44:23
7495
原创 关于关闭弹框后ckeditor5富文本编辑器内容不清空刷新的解决办法
这是一个Vue+element ui的后台管理项目。如上图所示这里有一个修改的对话框里边是表单和ckeditor5富文本编辑器，点击第一个更新按钮打开对话框后，表单和编辑器获取并显示当前可以修改的内容。但是当我关闭对话框再次点击其他更新按钮的时候打开的编辑器内容都是第一次打开对话框中编辑器的内容，除非我手动刷新一下浏览器。很显然在对话框关闭的监听事件中没有对富文本编辑器的内容进行清除更新才造成了这种现象。我用的是ckeditor5富文本编辑器封装的组件，试了很多方法都没办法把富文本编辑器中的内容清除更新，.
2021-04-27 15:28:15
3466
1
原创 渲染element ui 选择器 默认选项转换时的遇到的问题
最近在做一个微信小程序的后台管理项目，在做一个选择器的回显功能时遇到了一个坑有些人可能也碰到过，下边给大家分享下如上边两个图，这个选择器有两个固定的选择项是写死的，1代表最新新闻，2代表重要新闻，这是在一个修改弹框中的选择器，打开时会默认显示从数据控请求回来的当前状态值字段也就是上边显示的1，但我们要让1以最新新闻的样子显示在默认选中项中，这时就出现了下边一幕，我选项的值都替换了唯独默认选中项还是1，结构中的代码如下图请看项目用的是Vue+element ui ，我用双向数据绑定了这个editLi
2021-04-26 23:24:36
215
空空如也
如何访问部署在服务器上的node.js+express的后端服务
2023-12-18
Vue项目中vue.config.js打包配置
2023-08-31
vue中怎么实现预览 .doc文件，不使用第三方收费服务的那种
2023-08-04
element-ui el-cascader级联选择器设置指定层级不能选中
2021-06-19
如何在el-input输入框右上角添加图标，右上角！
2021-06-18
vue-element-admin登录页账号输入框点击选择历史登录记录会有背景色怎么修改
2021-06-08
弹框中的ckeditor5富文本编辑器怎么在关闭弹窗时清空刷新内容啊
2021-04-27
我这样配置proxy跨域为啥还是实现不了啊，vue后台项目用的axios
2021-04-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人