![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
后台管理
布偶乱跑
这个作者很懒,什么都没留下…
展开
-
前端复制文本内容
前端复制文本内容原创 2022-12-13 09:21:26 · 165 阅读 · 1 评论 -
vue excel文件导入并解析成数组
在项目中用到了,excel导入和导出功能,记录如下:安装插件npm i xlsx在"src/components"下新建 "excel2json.vue"文件,或者随便找个位置:<template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls,原创 2021-11-20 11:26:23 · 1308 阅读 · 0 评论 -
vue导出表格数据到Excel
在项目开发中,遇到需要导出表格数据到Excel的需求,在搜索之后,找到方法如下:安装插件npm install -S file-saver xlsxnpm install -D script-loader下载附件(Gitee)附件下载的文件放进项目目录,,为了方便我放在同目录:修改Export2Excel.js文件前几行:require('script-loader!file-saver')require('./Blob')require('script-loader!xls原创 2021-04-26 09:51:10 · 205 阅读 · 0 评论 -
vue 上下滚动通知组件
vue 上下滚动淡入淡出通知组件:效果:子组件:<template> <div class="text-container"> <!-- 滚动通知组件 --> <transition class="" name="slide" mode="out-in"> <p class="text" :key="text.id">原创 2021-04-22 10:47:27 · 1058 阅读 · 0 评论 -
element input输入框千分位无法回显问题解决方法
在后台管理的项目中,输入部分数量是需要千分位分割,但是遇到了父组件调用子组件无法回显的问题,父子组件不能双向绑定的问题,在使用计算属性之后解决,方法如下:父组件 <el-form-item label="最小库存StockMinSS:" prop="minSS"> <Custom-Input ref="ipt" :value.sync="editForm.minSS" :switchDayT原创 2021-04-17 13:52:18 · 642 阅读 · 0 评论 -
el-upload上传限制文件类型
在使用element的上传时,遇到限制文件类型的需求,但是在上传不符合要求的文件时,会弹出确认删除的确认框和不符合类型的message的提示,解决方法如下:html: <el-upload ref="upload" :file-list="form.fileList" action="http://..." :data="params" :on-preview="handlePreview"原创 2021-04-16 09:32:38 · 7425 阅读 · 1 评论 -
sheetjs在使用中日期被自动转换问题
在vue开发后台中,需求是前端上传csv文件,解析成对象数组,找到了插件SheetJS js-xlsxnpm i xlsx -S解析表格如下,是每天的需求量,库存等信息,表头要求是dd-MM-yyyy格式:在使用插件读取文件之后: readerData(rawFile) { this.loading = true return new Promise((resolve, reject) => { const reader = new File.原创 2021-03-08 15:48:48 · 1455 阅读 · 1 评论 -
el-input当type=number时只能输入数字
在使用element过程中,遇到了输入框需要加后缀,只能输正整数的需求,搜索后找到方法: <el-input type="number" min="0" max="999999" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="value1"> <template slot=原创 2021-02-07 16:49:29 · 1639 阅读 · 0 评论 -
js正则去掉路径中的/
在element的菜单组件中,三级菜单需要拿到父节点(二级菜单)的路径参数拼接在地址上,去掉"/",方法如下:去除斜杠去除字符串中的所有斜杠:str.replace(/\//g,'')去除双引号去除字符串中的所有双引号:str.replace(/\''/g,'')...原创 2020-11-02 10:34:07 · 2182 阅读 · 0 评论 -
element文件上传,携带其他参数
在OA系统的项目中,用到了文件上传,同时需要把用户信息传给后端,需要绑定data属性,data属性为对象类型,方法如下:html: <template slot="imgUrlForm" slot-scope="scope"> <!-- 文件上传 --> <el-upload class="upload-demo" action="/admin原创 2020-10-27 10:13:04 · 1690 阅读 · 0 评论 -
element下拉框绑定的value为对象时,数据不改变的解决方法
在后台项目的开发中,遇到了select下拉框需要绑定obj的情况,但是选中一个值后再改变,框内的值不变,并且所有选项变蓝色,查到的方法为,在el-select添加value-key:作为 value 唯一标识的键名,绑定值为对象类型时必填,修改后解决: <template slot="formCodeForm" slot-scope="scope"> <el-select v-model="form.formCode" value-key原创 2020-10-12 16:34:17 · 1777 阅读 · 4 评论 -
el-table中使用el-select,选择后不刷新解决方法
最近在做项目是,在element表格中使用下拉,但是下拉选择后,数据没有显示在select组件上,搜索后找到解决方案: <el-table :data="nodeFormTableData" style="width: 100%"> <el-table-column prop="personType" label="人员类型"> <!-- 人员类型下拉 --&原创 2020-09-18 10:58:39 · 3572 阅读 · 2 评论 -
element 前端部门选人组件-左树中表右候选(前端分页)
在做后台管理中,有选人组件的需求,一个弹窗,左边是部门树,中间是部门的人员表格,右侧是选中的人,弹框打开时请求一次数据,前端做分页,全选,经过几番折腾,例子如下:父组件vue:<template> <div> <basic-container> <h2>{{temp}}</h2> <customComponents @clear="clear" :temp原创 2020-09-08 14:25:24 · 2463 阅读 · 0 评论 -
前端开发项目,常用.gitignore配置
工作中经常用到git,在git add .的时候,通常不需要把依赖,测试,日志等文件添加到仓库,此时需要在项目文件夹内创建.gitignore文件,自己常用的配置如下:.DS_Storenode_modules/dist# local env files.env.local.env.*.local# Log filesnpm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.idea.原创 2020-07-28 09:15:30 · 1499 阅读 · 0 评论 -
三目运算符判断多个条件
标题在antd-vue的表格中,遇到需要根据后端返回的数字显示对应状态的问题,可以使用filter过滤器,也可以使用三目运算符:三目运算符: function test(num){ return num == 10 ? 10 :(a ==20 ? 20 :'未知') } console.log(test(11111))//未知 console.log(test(10))//10 console.log(test(20))//20...原创 2020-07-27 11:45:35 · 5865 阅读 · 0 评论 -
iView后台管理动态表格中添加图片
html如下:<Table border size="small" :columns="columns" :data="data" style="margin-top:20px"></Table>js如下:columns5:[ { title: '...原创 2020-04-23 21:56:41 · 281 阅读 · 0 评论 -
npm i时报错node-sass@3.13.1 postinstall: `node scripts/build.js`解决方法
今天在github上拉下来一个项目,但是npm i遇到node-sass报错打开 C:\Users\姓名\AppData\Roaming\npm-cache\node-sass把4.13.1文件夹下的文件复制到3.13.1再次npm i原创 2020-02-20 12:21:33 · 3044 阅读 · 0 评论 -
js对象数组根据某个属性去重
在后台管理中,遇到有些情况,需要根据数组中对象的某个属性去重,如id、name… 方法如下:let hash = {};// this.selectList是需要去重的数组// curVal.id代表根据对象的id去重this.selectList = this.selectList.reduce((preVal, curVal) => { hash[curVal.id] ?...原创 2020-01-20 12:07:35 · 1436 阅读 · 0 评论 -
js中国标准时间格式化成年-月-日
在工作中,从后台获取的数据是中国标准时间,但是需要传"年-月-日 时:分 "格式的参数,iview日期选择器中的写法,绑定的数据自己需要定义:template: <Form ref="submitForm" :label-width="120" class="form"> <Form-item label="有效期限...原创 2020-01-20 11:38:30 · 2289 阅读 · 0 评论 -
iview中表格数据动态渲染问题
在做后台管理时,经常使用到Table表格组件,绑定列数据进行显示,但是在返回数据有对象的情况,key值是不能使用“.”来选择属性的,需要使用render渲染template<Row> <Table border :columns="columns" :data="data" ></Table></Row>jsexport defau...原创 2020-01-01 16:59:37 · 2059 阅读 · 0 评论 -
iview中模态窗、弹出框(Modal)的确认和取消按钮问题
在使用iview做后台管理的过程中,遇到一个情况,我需要在弹出框点击确认按钮的时候,判断数据填写是否完整,但是自带的on-ok方法会取消显示弹出框,自己写样式的话怕兼容性不好,查了官网上的属性后,使用slot插槽,把两个按钮放在弹出框底部,Modal双向绑定一个变量,直接写方法绑定,在ok的方法中可以控制弹出框是否显示template <Modal v-model="modal" tit...原创 2020-01-01 16:34:09 · 5911 阅读 · 0 评论 -
iview单选绑定
在iview中,单选绑定使用label,如果Radio标签中没有内容,默认显示label的值,如果需要做单选并传值,双向绑定label可以做到template: <Modal v-model="modal2" title="title" width="400" @on-ok="ok" @on-cancel="cancel"> <Row> &l...原创 2020-01-01 16:17:33 · 445 阅读 · 0 评论 -
iview中table表格组件的单选
最近在做项目时,使用iview做后台管理,有个功能是在搜索出来的用户表格行尾,加一列勾选框,勾选某一个用户,但是iview提供的单选高亮颜色较浅,识别度不高,最后使用render渲染出来这个样式,可以勾选或者取消勾选 { title: ' ', align: 'center', key: 'checkBox', r...原创 2020-01-01 16:07:09 · 1575 阅读 · 0 评论