婉约派
常威在打来福~
这个作者很懒,什么都没留下…
展开
-
发送接口请求后端,创建a标签实现导出功能
async handleExport() { const params = { startTime: dateStart ? dateStart.getTime() : '', endTime: dateEnd ? dateEnd.getTime() : '', pageIndex: this.datas.page.pageIndex, pageSize: this.datas.page.pageSize, }; // 参数随意 const ret原创 2021-07-06 18:45:32 · 316 阅读 · 0 评论 -
导出功能: 导出为excel文档,后端做导出处理,js代码发送接口直接下载
async handleExport() { const newRow = JSON.parse(JSON.stringify(this.form)); delete newRow.creationDate; const params = { ...newRow, startTime: dateStart ? dateStart.getTime() : "", endTime: dateEnd ? dateEnd.getTi原创 2021-05-24 14:56:01 · 1818 阅读 · 0 评论 -
socket.io入门评论案例
打开两个localhost3000,模拟从不同的用户打开,监听3000端口// 连接服务器:监听端口 http://localhost:3000/http.listen(3000, () => { console.log('listening on *: 3000');})请参考readme.md文件原创 2021-03-09 10:38:38 · 109 阅读 · 0 评论 -
vue中height从0到auto,子元素高度过渡动画
之前看过的那篇文章找不到了~1.template中,这里用的是iview框架的按钮和icon图标,根据点击按钮切换图标和展开收起动画<qf-button size="small" type="text" @click="setContent"> <qf-icon :type="isActive ? 'angle-double-up' : 'angle-double-down'" size="12" color="#999" class=原创 2021-02-02 10:52:24 · 1772 阅读 · 0 评论 -
vue 封装插件到npm上
使用vue封装插件并上传到npm上,用npm i xxx -S下载下来使用配置文档(在template中使用)配置文档(用this.xxx使用)1.新建一个vue项目: vue init webpack-simple “项目名”vue init webpack-simple “项目名” (这样的vue项目中会有webpack.config.is文件,是用来配置插件代码的)删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容-----在src文件夹下新建一个lib文原创 2020-11-18 16:52:28 · 293 阅读 · 0 评论 -
vue实现复制功能
1.需求,点击按钮实现复制功能<button class="copy-btn" @click="copy"> 复制</button>methods { copy() { const createInput = document.createElement('input'); createInput.value = this.data.token; document.body.appendChild(createInput);原创 2020-09-22 14:15:39 · 331 阅读 · 0 评论 -
vue读取文件夹下面的文件名称
借鉴文章点击查看原文件1.需求需要读取某个文件夹下面的所有文件名称,然后显示这些文件名称2.在mounted中:mounted() { const files = require.context('需要读取的文件路径', false, /.svg$/).keys(); console.log(files)}// require.context('需要读取的文件路径', false, /.svg$/)// require.context接收三个参数,第一个是文件路径,第二个是是否读取子文件。f原创 2020-09-15 16:27:07 · 12716 阅读 · 3 评论 -
带选择框的table表格,记录已经选择的数据,翻页不清空
需求这个表格选中了两条数据,让它们经历翻页,条件搜索之后还存在,那么如下1.在tamplate中:<el-table :data="tableData" stripe ref="multipleTable1" style="width: 100%;overflow: auto;margin-bottom: 7px;" :style="{'height': tableData.length > 7 ? tabHeight : 'auto'}" v-loading="原创 2020-06-28 19:58:27 · 812 阅读 · 0 评论 -
element自定义el-dialog标题,加图标
template中<el-dialog :visible.sync="dialogTableVisible"> <div slot="title" class="dialog-title"> <i class="el-icon-edit-outline"></i> <span class="title-text">数据详情</span> <div class="button-right"> .原创 2020-06-12 20:04:55 · 15285 阅读 · 3 评论 -
element中下拉框select在长页面滚动时,下拉弹框没有跟随下拉框跑路
1.需求:在页面滚动过程中,弹框并没有跟着下拉框一起跑,一直固定在那个位置2.修改:在tamplate中:<el-col :span="10" class="tb-row" style="float: right;"> <el-form-item label="经营性质" prop="proTypeCode"> <el-select v-model="formData.proTypeCode" placeholder="请选择经营性质" filterabl原创 2020-06-05 17:59:15 · 9910 阅读 · 12 评论 -
element设置自定义选择年月日:日期时间选择器
1.需求:需要做一个可以自定义输入时间的选择器这个时间不需要。在template中<el-date-picker v-model="formData.proStrDate" type="datetime" style="width: 100%;" placeholder="" value-format="yyyy-MM-dd" format="yyyy-MM-dd"</el-date-picker>...原创 2020-06-05 17:17:38 · 4776 阅读 · 0 评论 -
element选择器select的value-key的用法
1.需求,下拉框选择时,不需要特意写个方法来给name赋值,直接拿到对象,template中<el-col :span="8"> <el-form-item prop="quantity_name" label="定量方式" label-width="80px"> <el-select filterable v-model="editForm.quantity_name" placehodler="请选择" value-key="base_code" clear原创 2020-05-27 20:55:16 · 8979 阅读 · 0 评论 -
vue中使用all()同步方法
1.需求,我需要等到多个接口都返回值时才发起另一个请求,公司大佬教我的,6到飞起在script中<script> mounted () { this.mount() }, methods: { mount () { let _this = this function getUserAccount () { return _this.axios.get('xxx'+ '&sortCode=6012&pageNum=1&原创 2020-05-27 20:47:58 · 851 阅读 · 0 评论 -
element表格拖拽事件 vue
这是之前做过的一个需求,看了一篇文章做的,已经不记得是哪篇文章了,现在又用到了,所以记录下1.下载包npm install sortablejs --save2.在页面中引入或者全局引入import Sortable from ‘sortablejs’3.在template中<div id="second"> <el-table class="threeTable" :style="{'height':tableData.length === 0 ?原创 2020-05-26 11:57:17 · 779 阅读 · 0 评论 -
获取浏览器地址
window.location.protocol + ‘//’ + window.location.host相当于拿到 http://localhost:8802window.location.protocol ------------- httpwindow.location.host -------------------- localhost:8802原创 2020-05-23 09:30:52 · 578 阅读 · 0 评论 -
element树组件el-tree默认选中展开某些节点
1.需求比如像这种需求,他这是点击某个节点时发送请求,然后获取他下面的子节点,把子节点追加上去,但是呢,如果只追加不默认展开的话就会有个问题,就是点击了,子元素追加了,但是没展开,就导致我需要手动点两次展开,用户体验不好1.在template中:<el-tree class="secondTree-tree haveChild" :data="treeData" node-key="classCode" highlight-current ref="menuTree"原创 2020-05-21 21:03:26 · 5926 阅读 · 3 评论 -
【递归】根据code值递归获取属性结构数组中的name值
1.需求有个需求嘛,就是一个数组里面有code和对应的name值,但是操作时只保存了code值,要name值时就要获取树形结构的数据<el-tree class="" :data="treeData" node-key="classCode" highlight-current ref="menuTree" :props="defaultProps" style="overflow: scroll;" :style="{height: treeHeight + 'px'}" @n原创 2020-05-11 22:36:04 · 809 阅读 · 0 评论 -
el-table表格内部加合计和单元格合并element
1.需求,做一个表格内部合计加单元格合并2.在template中<el-table class="threeTable" :height="tabHeight" :data="tableData" v-loading="tabLoading1" ref="multipleTable1" stripe style="width: 100%;" @selec...原创 2020-04-24 12:59:21 · 5773 阅读 · 3 评论 -
el-table表格合计element
1.template中<el-table stripe :data="tableData" class="th-center" height="580" ref="tableData" highlight-current-row v-loading="tableLoading" border show-summary :summary-method="getSummaries">...原创 2020-04-23 19:38:03 · 1295 阅读 · 0 评论 -
el-tree修改、(删除)节点后,不刷新整颗树,局部刷新父节点
1.需求这里有个需求就是我要修改子节点。修改之后又不能刷新整棵树,要记录当前点击的节点,如果刷新了就记不住了,想记录会比较麻烦,一般的都是不会刷新整棵树,局部刷新我这里的需求是点击这棵树的时候发送请求获取他的子节点,把子节点添加进去,在template中<el-tree class="firstTree-tree" :data="treeData" node-ke...原创 2020-04-15 20:41:57 · 7117 阅读 · 2 评论 -
1.在表格中操作时间,对时间格式转化,2.自定义规则验证身份证号
1.写个vue过滤器在templatle中,有个需求就是我要在表中操作,如果操作选择了时间之后,如果不写个过滤器,显示的时间就不对<el-table :data="tableData" stripe style="width: 100%;" @row-click="handleCurrentChange" highlight-current-row @selection-ch...原创 2020-04-13 22:19:17 · 153 阅读 · 2 评论 -
el-tree鼠标移入才展示树的图标
看了这篇文章,结合自己的需求改了下鼠标移入展示图标1.需求2.实现在template中<el-tree :data="treeData" node-key="classCode" // 动态获取到的数据的唯一值即可 highlight-current ref="menuTree" :props="defaultProps" :style="{height: ...原创 2020-04-13 21:57:09 · 1539 阅读 · 0 评论 -
数组去重
// 数组去重:doUnique (arr) { // 从别的地方掉了这个方法,传入了一个数组 this.list = []; arr.forEach(item => { if (this.list.indexOf(item) === -1) { this.list.push(item); } }); // 进行map映射: this.l...原创 2020-04-13 21:37:12 · 126 阅读 · 0 评论 -
vue+element导出表格成xlsx文件功能
template中<el-button icon="el-icon-document" type="primary" size="small" @click="exportTable">导出</el-button><el-table id="testTable1" :height="tabHeight" border highlight-curren...原创 2020-03-18 09:23:02 · 656 阅读 · 1 评论 -
vue+element导入xlsx功能
template中<el-button icon="el-icon-document" type="primary" size="small" @click="uploadExcel">导入</el-button><!-- 导入盒子开始 --><div style="margin-left: 6px;overfloat:hidden;">...原创 2020-03-18 08:52:37 · 429 阅读 · 0 评论 -
echarts做日期时间的散点图,两点注意:1.装图表的盒子必须要有宽高,宽可以为100%,高必须是个确定值;2.修改赋值了option中某个属性必须重新绘制图表:图表实例化.setOption()
1.需求如图,需要做个以上x轴为日期,y轴为时间点的散点图,以此来统计用户七天内用户每天的上线下线在线时长数据,如果到了小时了就显示多少小时,如果在一小时之内就显示多少分钟思路:都是登录,退出,登录,退出,而且退出的时间比登录的大,直接判断它的状态是退出还是登录,如果当前状态退出,下个数据状态是登录,那么当前日期时间减去下个数据的日期时间就可以了折线的一般的都是数值型,且一根线上x轴与...原创 2020-03-16 17:42:25 · 2187 阅读 · 0 评论 -
el-tree选择框我只要父级
1.需求假如我点击了一条数据,这条数据里面已经包含了下面所勾选的子信息了,那么我就只需要获取父级信息就好了,我只想要【测试机构小小3】和【测试机构2】,但是返回给我的数据是把里面的每个勾选了的子信息也一并返给我了,现在就是在得到数据之后要做一个过滤,双层for循环,把子信息给去掉2.实现template中<el-tree ref="orgTree" class="o...原创 2020-03-12 10:16:52 · 1462 阅读 · 0 评论 -
vue父子组件传值
写一篇父子组件之间的传值来记录下,怕以后会忘记template中在这里插入代码片methods中,这是跳转到另一个子页面去,括号内的是参数,name是要跳的页面的路由path,父子组件需要放在一个文件夹下哦,如果不在的话,就要在子组件页面引入父组件,params是传参的名字methods{ goDesign (item, status) { this.$router.pus...原创 2020-03-11 23:02:17 · 236 阅读 · 0 评论 -
根据屏幕高度盒子自适应高度vue
1.需求pc端开发的时候,比如有个盒子需要跟着屏幕的高度变化而变化,那么就需要设置他的高度2.实现在template中,以设置穿梭框的高度为例<div> <span>选择收件角色</span> <el-transfer :titles="['所有角色', '已选角色']" filterable ...原创 2020-03-11 09:20:48 · 2342 阅读 · 0 评论 -
elementui中穿梭框的用法,解决选择重复冲突的问题vue
1.需求要做这种带搜索的选择穿梭框2.实现在template中<el-transfer :titles="['所有角色', '已选角色']" // 两个穿梭框标题 filterable // 可以搜索的属性 :filter-method="filterMethod" // 搜索方法 filter-placeholder="请输入用户" v-model...原创 2020-03-10 00:24:46 · 3163 阅读 · 4 评论 -
判断一个对象是否是空对象和对象,数组深拷贝
有时候会有需求,就是我点击了某一行数据,而这一行的数据是个对象,我之前给他定义了一个值在data中data() { this.obj ={}}如果我在methods下面做了一个判断methods { ObjectFind () { if (JSON.stringify(this.obj) === '{}') { // 当我这个对象还是个空对象时该做什么操作 } }...原创 2020-03-09 20:38:52 · 205 阅读 · 0 评论 -
elementui中,下拉框设置,既可以从下拉框中选择,又可以自己添加选项
1.需求在用elementui结合vue时,有个需求就是有个下拉框,我需要可以从下拉框中选,也可以自己输入的值变成下拉框的选项,那么,代码如下:2.实现在template中,我这是在表格中,表格中某一列要可操作,就是在表中操作<el-table-column label="税率" :show-overflow-tooltip="true" prop="taxRateVal" min-...原创 2020-03-08 23:09:27 · 6383 阅读 · 0 评论 -
vue获取到树形结构后递归遍历数据,生成树形结构数据,无限级
1.需求做的是个三级联动的数据options: [{ value: 1, label: '东南', children: [{ value: 2, label: '上海', children: [ { value: 3, label: '普陀' }, { value: 4, label: '黄埔' }, ...原创 2020-03-08 22:51:55 · 10280 阅读 · 2 评论 -
elementui树形结构组件
1.需求这样的树又或者带选择框的树2.代码实现因为这个树不仅是展示上面的节点。我还需要对它进行一些需求操作这就意味着,我不能通过调用接口来刷新这颗树。否则,你想再定位到之前你点的那个节点就找不到了。因为你之前点的那个节点,在刷新之后就没记录了。比如,对树上的节点进行添加,根据里面唯一值来判断的就会发生改变。第二个为了性能的角度考虑,发送请求过多也不好。所以,下面这篇进行手动添加、删除...原创 2019-12-27 16:30:49 · 5374 阅读 · 0 评论 -
elementui与input[type="file"]文件上传
1.elementui文件上传组件template中<el-upload :http-request="uploadFile" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" ref="upload" :data="formData" limit="4" ...原创 2019-12-25 20:59:36 · 13598 阅读 · 0 评论 -
elementui小小总结一篇
1.当使用element弄个小表格时,有可能表格每行变得很矮,需要把每行放高一点每行空隙高度很矮<el-table :height="220" :data="data2" ref="multipleTable1" :row-style="rowStyle"> <!-- <el-table-column type="selection" width="55...原创 2019-11-20 20:17:26 · 285 阅读 · 0 评论 -
elementui中type="expand"类型的表格只打开一条数据下的子表
类似这种类型的,通过点击这个小图标来展开下一层表格,这个小图标相当于一个按钮,控制下级表格的显示隐藏。代码:<el-table :height="tabHeight" border highlight-current-row :data="data1" :row-key='getRowKeys' :expand-row-keys="expands" ...原创 2019-11-19 20:41:27 · 2025 阅读 · 0 评论 -
跨境电商中选择商品规格的示例
1.电商系统中经常会遇到一个商品有多个规格的情况,且规格维度(如颜色、尺寸、性别)和维度的取值(红、黄、蓝)都是不确定的,尝试根据一个任意维度规则的属性率,生成所有可能的商品全排列组合假如有:Color[‘红色’,‘白色’,‘粉色’]Size[‘S’,‘M’,‘L’]Six[‘男’,‘女’]示例输出:‘红色’ ‘S’ ‘男’‘红色’ ‘S’ ‘女’‘白色’ ‘S’ ‘男’‘白色’...原创 2019-04-10 10:26:44 · 786 阅读 · 0 评论