日常开发bug集合
以日常用到的技巧进行总结分享
苍南_
事与物合适最重要,争时要心静,急时人要稳!
展开
-
vue2(class-api) + Typescrict 布局用法
作为对照,先回忆一下js在vue2项目中的写法<script>export default{ data(){ return {} }, methods:{}, computed:{}, filters:{}, watch:{}, created:{}}</script>本来vue2是不支持TS的,如果要在项目中使用TS,就需要相应的插件和配置,虽然用起来有点尴尬,但终究也是能用了。TS在vue2项目原创 2021-07-01 09:08:01 · 843 阅读 · 3 评论 -
element 表格 最后一行合计。 合并单元格方法
效果是最表格最后一行,合并两列arraySpanMethod({ rowIndex, columnIndex }: any) { if (rowIndex === this.tableData.length - 1) { if (columnIndex === 0) { return [1, 2] } else if (columnIndex === 1) { return [0, 0] } } }原创 2021-06-30 13:40:01 · 2972 阅读 · 9 评论 -
element input 限制值不为负数且类型为数字
<el-input v-model="fileEndNo" type="number" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>原创 2021-06-25 17:30:09 · 3041 阅读 · 0 评论 -
vue2+Ts+elementUI_后台管理系统_Excel文件的上传下载
1.下载功能// 下载需要ID 使用插槽传递ID<el-button @click="downLoadEXCEL(scope.row.id)"></el-button>// 下载功能 downLoadEXCEL(id: number) { downloadMemberExcel(id).then(res => { if (res) { const blob = new Blob([res.data]); /原创 2021-06-25 09:03:34 · 341 阅读 · 0 评论 -
Element ui vue2(class-api)+TS 中的表单校验记录
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef"> <el-form-item label="商品名称" prop="goods_name"> <el-input v-model="addForm.goods_name"></el-input> </el-form-item> </el-form>data(){ return.原创 2021-07-06 23:07:51 · 721 阅读 · 0 评论 -
Vue 3模板根支持多个元素,eslint报错,webstorm
vue3支持模板根元素多个,解决eslint报错原创 2022-05-12 11:54:29 · 585 阅读 · 0 评论 -
sass安装版本问题(vuecli4)
配置移动端,经过万分报错,无意间直接安装sass和sass-loader成功// 这两个版本号“sass”: “^1.43.2”,“sass-loader”: “^7.2.0”,vue.config.jsconst path = require('path')module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'sass', patterns: [原创 2021-10-17 00:44:50 · 656 阅读 · 2 评论 -
vue版本更新文档说明页面
项目需要,写了一个,但是又不要那么完美,记录一下仔细看都能看懂<template> <div id="updateSystem" ref="updateSystem"> <div id="2-2-6" style="position: fixed;top: 0; left:0;right:0" /> <section class="container"> <article class="markdown section原创 2021-10-12 14:56:57 · 586 阅读 · 0 评论 -
从父组件中获取子组件的值
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。原创 2021-09-27 09:58:02 · 9305 阅读 · 0 评论 -
lib-flexible适配大屏方案(附移动端适配)
前言 神仙大佬文章 相信大多数移动端前端开发者都是用过lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件,属于开源项目,可以在各类项目中引入并使用,为移动端的开发者带来了无穷的便利。 但是,有人提出为什么在屏幕尺寸超出一定分辨率后便不再适配? 今天针对该问题来尝试给出解决方案。关于lib-flexible解读 lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设转载 2021-09-10 15:48:06 · 1048 阅读 · 0 评论 -
插件 moment.js和vue中时间过滤器filter,定义全局的
Vue.filter('dateFormat',function(originVal){ const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth()+1+'').padStart(2, '0') const d = (dt.getDate()+ '').padStart(2, '0') const hh = (dt.getHours()+'').padStart(2, '0')原创 2021-07-04 21:32:54 · 160 阅读 · 1 评论 -
vue+TS+(vue-gird-layout)简单实现撤销功能
公司业务,使用vue-gird-layout实现能够添加模块等各种字段,可以对字段进行修改大小和位置,达到做出PDF,现要求实现撤销到上一步,主要是对数据的处理操作,我测试想了两天,最后被组长一下做出来了了。实现技巧:主要使用两个数组进行保存数据,一个是保存历史状态,,一个是保存现阶段操作老的状态注意点⚠️:存储数组数据的时候必须要使用JSON.parse(JSON.stringify(data)),不然存储的数据会覆盖上一个数组<el-button @click="backOut" :disa原创 2021-07-07 09:52:00 · 1159 阅读 · 5 评论 -
element UI+Typescript Transfer 穿梭框的使用(右边数据回显问题)
这里的v-model就是右侧数据回显的值,是个回显数据key的数组:data 绑定的数据是全部的数据 也是一个数组,需要在函数data()中声明,而且右侧框中的数据必须是在左侧数据中,否则不会显示(左侧的数据是全部数据,elementUi内部对左侧已经进行去重了)Html代码<el-dialog title="编辑" :visible.sync="changeDialogTableVisible" width="45%"> <span slot="footer" clas原创 2021-07-02 11:47:25 · 7660 阅读 · 5 评论 -
axios请求的参数自动拼接到url后面
axios的传参有两种方式:一种是params一种是data而params会默认把 要传的参数拼接到url路径后面原创 2021-06-30 11:06:54 · 2998 阅读 · 0 评论