1、tabel表头文字自定义换行// 方法一 el-table-column propotherCost :labelxxxx\n(元) // 通过:label添加\n /el-table-column .xx .cell { white-space: pre-line; } // 方法二 el-table-column // 通过template template slotheader // html换行这个就自由发挥了 divxxxx/div div(元)/div // xxxxbr(元) /template template slot-scopescope {{ scope.row.fieldName }} /template /el-table-column关于换行也可以使用width设置宽度进行换行但不好控制换行字体个数上少下多分辨率适配问题而且整体列的宽度效果会不好不能做到均分。可编辑input focusthis.$refs.edit.focus(); // 正常我们用$refs,但在table里不支持会报undefined document.getElementById(”edit“).focus(); // 需要使用id来获取row-click、cell-click问题技术点table的行点击事件和单元格点击事件column参数返回的property代表字段名它和el-table-column的prop是一样的。实现场景有一列有多标题有一列是单标题头这两列我设置了相同的class。问题问题就出在相同的class上不管我点击多标题头还是单标题头都会返回单标题头的property可能是单标题头在后面拿的是最后面的。解决方法找到问题了就好解决了我设置不同的class返回就对了至于样式嘛两个class公用设置一样的就好了。版本样式兼容性package.json使用的element-ui版本不固定使用^不同的开发者发布后可能安装下来的不是同一个版本就会造成table生成的元素不一样导致样式问题解决方法1、package.json使用的element-ui版本固定去掉前面的^2、不同element版本生成元素的table元素不同点在el-table__cell这个class上有的th、td有这个class有的没有在改样式的时候如果不加el-table__cell在生成的有el-table__cell标签的版本上将会层级不够修改样式失败如果加el-table__cell在没有el-table__cell标签的版本上也将修改失败。兼容性方案a、不加el-table__cell在样式上加 !important;b、加el-table__cell和不加el-table__cell两种都写推荐没有值显示–方法一通过template标签略 方法二formatterel-table-column :formatterformatter propprop1 label值 / formatter(row, column, cellValue) { return cellValue ? cellValue : --; // 这个代码不严谨注意0、单位这些 }// 方法三cssvue3写法2、v-loadingv-loading可以在div上也可以在table上但要想实现v-loding效果所在标签不能使用v-show包括父标签。3、formel-input校验、输入数字踩过的坑1、oninput “valuevalue.replace(/[^\d]/g,‘’)”如果先输入字母或中文会被去掉rule提示出现后输入正确的内容rule不会消失点击submit也无法触发校验失效。总结加了rules校验并且触发判断是change的input框不能限制输入类型。2、设置type“number属性可以输入英文字母e”并且在最后一位时校验会提示没输入。3、v-model.number不能输入小数点。解决方法先略4、select下拉展示本该消失点击select展示下拉项选择后点击下拉项收起但是我这里选择后多了一步弹窗确定操作完后再执行其他流程这里就会遇到选择下拉项后弹窗出来下拉项收起点击弹窗”取消“或”确定“按钮后弹窗消失下拉项又显示出来了。通过排查我发现鼠标还定位在select框上即select框此时还在focus状态下找到问题就容易解决了让select失去焦点即blur。之前也偶现过什么操作都没做首次进页面下拉在展示的应该是一样的。this.$refs.select.blur();5、日期选择器问题选择弹窗样式错乱。问题背景dialog上日月年切换日期类型肯定也得切换鼠标放日期input框上后日期选择弹窗标签生成位置不对应该在根目录下有时候会生成在日期input框下面导致样式错乱。解决方法强制给生成在日期input框下面的日期弹窗设置fixed如果正常生成在根目录下面这个样式也不会起作用只针对特殊情况。功能当前日期之后的时间不能选精确到时分秒1.组件上加picker-optionsel-date-picker :picker-optionssetRange v-modelstartTime ...... /2.data里面定义该日期范围字段setRange: { disabledDate: time { // 禁用今天之后的日期(当前天可选) return time.getTime() Date.now() }, selecRange: // 这个没东西也需要定义不然后面赋新值的时候没有用 }3.监听日期绑定值的变化startTime: { handler(newValue, oldValue) { if (newValue) { // 这里用了moment日期格式转换的依赖自己引入一下 if (moment().format(yyyy-MM-DD) moment(newValue).format(yyyy-MM-DD)) { this.setRange.selectRange 00:00:00 - moment().format(HH:mm:ss) // 如果是前面日期变当天(当天变当天不需要因为前面日期时分秒可以到23:59:59秒当天就不一定了)时分秒要重置00:00:00 if (moment(newValue).format(yyyy-MM-DD) ! moment(oldValue).format(yyyy-MM-DD)) { this.startTime moment(newValue).format(yyyy-MM-DD 00:00:00) } } else { this.setRange.selectRange 00:00:00 - 23:59:59 } } }, deep: true, immediate: true }最终实现效果存在的不足1.无法精确到秒只能到时分2.没有做实时监测setInterval,因为在你选的过程中时间是在一直变的特别是秒这些也不是什么大问题就不实现了。功能结束日期不能小于开始日期可以同天日期范围有组件但是有时候有特殊场景需要单独写两个日期组件当开始日期和结束日期这时候就需要手动来实现。当然开始日期也不能大于结束日期但是我要讲的重点是结束日期同上我们还是用picker-options实现setStartDateRangese:{disabledDate:time{const timeEthis.endTime;// 可以和结束日期选同一天returntime.getTime()new Date(timeE).getTime()// 或者为了和结束日期保持一致这么写 // const endDaymoment(timeE).startOf(day)// const curDaymoment(time).startOf(day)//returncurDay.isAfter(endDay)}}, setEndDateRangese:{disabledDate:time{const timeSthis.startTime;// 重点来了同样的写法结束日期却不能和开始日期选同一天加个“”没用 //returntime.getTime()new Date(timeS).getTime()// 那我们减个一天的时间戳不就行了returntime.getTime()new Date(timeS).getTime()-1*24*3600*1000// 或者这么写(moment需要引入)// const startDaymoment(timeS).startOf(day)// const curDaymoment(time).startOf(day)//returncurDay.isBefore(startDay)}}6、Pagination 分页一般配合table使用遇到的问题current-page1点击页码有一个弹窗确定后再选中该页码取消就还停留在当前页但是无法控制不选中其实偷偷告诉你们current-page加不加都一样但是正常情况下不能不加原因下面会提到后面我就放弃了不管取消还是确定最终反正要去下一页的因为是个需要修改、保存的table确定就保存取消就不保存数据最终都让他跳下一页2但是它又出现了新的问题看来还是得解决啊当我切换到最后一页再改变每页显示条数或者重置筛选条件分页正常是要重新定位到第一页的但是赋值失败它仍然停留在最后一页上正常情况下如果不加current-page你就没办法重新赋值为第一页也会出现这个问题在我看current-page也就这个作用了解决方法1、pagination组件加上key每次size-change都重新渲染即每触发一次就先key推荐2、pagination组件上设置v-if设置页码后控制v-if重新渲染要使用nextTick。还有一种情况current-page无法赋值成功总是在第一页无法切换其他页原因是请求接口前想着把total总条数先重置一下先赋值0接口请求成功后再使用接口返回的值即total再重新赋值为接口返回的对应值这样是不行的。从上面几点来看current-page机制原理还是能琢磨个七七八八哈哈哈哈没事多搞怪才能有大发现。7、upload上传文件1、通常auto-upload为true即选中图片后立即上传那么action就需要对应的上传接口地址接口不需要加特殊属性就项目中封装的普通接口就行组件会默认给个file二进制参数给接口接口返回上传成功的文件id这个在on-success方法不管接口成功还是失败都会进入该方法里面获取2、使用http-request设置上传接口方法该方法可以自定义上传时的入参字段但是需要处理一下const params new FormData() params.append(xxFile, file.file) // file:http-request上绑定的方法有返回的参数如果是多个文件就循环该入参 params.append(xx, this.xx) // 需要入参多少就append多少字段 // ...... // 调接口。上面的params处理可以封装成一个方法接口方法里面调这个方法页面入参就可以和普通入参一样了3、file-list相当于v-model通常是需要的上传、删除的时候都需要处理这个数组它主要的用途应该是回显吧因为只是提交表单只有上传、删除功能我捣鼓过不设置该属性其实也不是捣鼓了只是遇到遗留bug我发现这里当初竟然没设置该属性我又懒得加凭着不撞南墙不回头然后我们看看如果不设置该属性是什么情况。我们知道正常情况上传确实多了上传图片前面也提到了这个on-success方法不管接口成功还是失败都会进入该方法但接口失败了我们要删除该图片不让其显示此时你调删除方法会有点问题删除的fileList参数是混乱的我是直接在on-success根据response判断失败的话处理fileList参数移除fileList数组里面失败的文件我没想到会成功。应该也可以调删除方法只是删除方法需要再为该情况作处理我没搞。这么想是不是回显也可以这么办哈哈这种搞法不会被骂吧补充上传回显时on-success方法里面给file-list赋值的时候不要改动uid值前面也说了即使你不设置file-list无论接口成功还是失败该组件都会回显出来上传的文件show-file-list为true时-默认此时还没走到接口反馈此时我们还需要处理接口数据接口成功组件回显的blob文件消失接口赋值文件出现如果你在接口赋值的时候修改了uid恭喜你这个消失和出现的过程是有感的交互不好这是为什么我当时不直接重新请求获取所有文件回显而是处理的原因因为我是想拿这个uid当文件id使用于删除啥的找了好久才发现如果不改uid就不会有顿挫感可以无感使用接口数据这个uid是组件生成blob文件时自带的它肯定也是通过uid监测变化的应该key用的uid吧。既然知道了原因我觉得on-success后也是可以直接重新请求接口获取所有文件然后回显但是也还是要处理下数据给他们uid让他们uid不要变这个我没试。