- 博客(39)
- 收藏
- 关注
RSS订阅原创 上传文件后，直接修改本地文件，浏览器报错问题
上传文件时将file转成base64，因为bese64与本地的文件状态已经无关了，然后再转成file传给后台使用。
2023-02-16 10:07:08
627
1
原创 高德地图 JS API 结合VUE 展示公交线路示例
绘制一条线路效果图：1. 安装：npm i @amap/amap-jsapi-loader --save2. 代码：<template> <div class="amap-wrapper"> <div id="container" class="amap-box"></div> </div></template><script>import AMapLoader
2022-05-09 17:19:33
1058
2
原创 el-table带其它参数的formatter格式化数据显示
1. el-table中使用带默认参数的formatter格式化数据显示：<el-table-column class="input-width" label="运营单位" prop="corpId" min-width="120" :formatter="formatCorp" />formatCorp(row) { return this.corpList.length > 0 && row.corpId ? this.corpList.find((
2021-12-17 12:10:12
2068
2
原创 el-table展开行---每次只展开一个
图一（修改前可以展开多个）：图二（修改后每次只展开一个）：具体代码：<template> <div class="wrap"> <el-table :data="tableData" style="width: 100%" border :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandColumn"> &.
2021-12-13 10:15:33
4178
原创 el-table 手动选择展示列（二）
需求同el-table 手动选择展示列（一） 是一样的，只是换了一种写法：【为了避免 v-for 和 v-if 不同时使用，则使用了computed方法来更新表格字段的显示与隐藏】【 利用 <template slot-scope="scope"> 对表格数据进行 format 格式化显示 】
2021-11-24 18:08:56
872
原创 el-select 结合 el-checkBox 实现下拉全选+多选功能
实现效果如图所示：具体代码如下：<!-- * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能--><template> <div style="padding: 300px 100px;"> <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="
2021-11-23 17:07:58
2514
原创 el-table 点击单元格，改变所在行和列的背景色
1. 需求：el-table 点击单元格，改变所在行和列的背景色，加粗显示交叉点文字；2. 初始化表格，如下图：3.点击“湖南”单元格后，改变其所在行和列的背景颜色，加粗显示文字，如下图：4. 代码如下：<!-- * @Description: 点击单元格，改变当前所在行和列的样式--><template> <div class="wrap"> <el-table :data="tableData" bor..
2021-10-27 18:00:58
4936
1
原创 el-table 中间列表头合并显示
需求：由于表格中间列的数据含义相同，所以需要将中间所有列的表头进行合并展示；初始效果图：完整代码如下：<el-table :data="tableData" style="width: 100%;"> <el-table-column align="center" prop="name" label="姓名" width="200"></el-table-column> <el-table-column ...
2021-10-15 11:33:32
781
原创 el-time-picker组件选择时间范围时，不设置初始值无法选中
el-time-picker 组件选择时间范围的时候，不设置初始值无法选中问题<el-time-picker is-range v-model="value" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" value-format="HH:mm:ss"></el-time-pic...
2021-09-29 18:19:39
2624
2
原创 el-input 类型为number时，输入中文后光标上移问题，并且去掉上下箭头
1. 设置 el-input 的 type='number'后，只能输入数字，输入中文后会自动清空，但是会出现一个问题：【光标会上移，如下图】解决方法：修改样式/** * 解决el-input设置类型为number时，中文输入法光标上移问题 **/.el-input__inner{ line-height: 1px !important;} 2. 设置 el-input 的 type='number'后，输入框后面会出现上下箭头：【如下图】解决办法：修改样式...
2021-09-28 17:04:28
3359
原创 el-cascader 级联选择器清空初始化
需求：级联选择器在清空了输入框之后，需要同时清空弹框里面的选中样式、高亮、以及回归初始化状态只展开一级菜单：【图1变 图2】解决办法：判断输入框为空值之后做以下操作恢复到初始化状态：this.$refs.myCascader.$refs.panel.checkedValue=[];//清空选中值this.$refs.myCascader.$refs.panel.clearCheckedNodes();/...
2021-09-28 15:30:26
6240
3
原创 js类名获取元素时HTMLCollection为空
问题：在vue项目中通过原生js方法获取DOM元素（类名获取元素），控制台中可以打印出来值，但是length长度为0且操作不了，代码和截图如下：console.log(document.getElementsByClassName('el-dialog__body'))解决办法：经分析之后，发现是因为代码写的位置不对，出现这个错误的原因是：js执行太快，获取的时候DOM元素还没有渲染完成，所以解决办法就是延迟获取，待节点渲染完成之后再获取元素：this.$nextTick...
2021-09-18 17:17:47
2453
原创 el-select结合el-tree实现树形多选
业务需求：1. 在树形列表中选择项目；2. 树形列表需带有筛选过滤功能；3. 将已选择的项目展示在输入框中；4. 输入框中的选中项可以被单独快速删除；5. 下拉框中可再次对之前选择过的项目进行重新选择。实现思路：1. 所用技术：vue + elementUI组件库；2. 左侧：使用 el-select 下拉框多选；右侧：使用 el-popover 弹出框 里面包含了 el-tree 树形列表进行展示。最终效果：1. 初始页面展示如下：2....
2021-09-15 18:00:50
11321
17
原创 reduce() 的常用方法
定义reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。注意：1. reduce() 对于空数组是不会执行回调函数的。 2. 当提供了初始值initialValue，则第一次执行回调函数时previousvalue就是initialValue，则currentValue是数组第一项；如果没有提供初始值，则previousvalue是数组第一项，currentValue是数组第二项。语法：array.redu...
2021-09-08 14:54:11
7319
原创 vue中watch同时监听多个属性问题
1. watch监听的多个属性之间没有联系（name、list），各自监听值改变后执行各自的方法，也无关顺序问题；watch:{ name(newValue, oldValue) { this.name = newValue }, list(newVal, oldVal) { this.list = newVal }}2. watch监听的多个属性之间相互有联系（useableCardTypeTime、tableData），并且
2021-08-23 16:30:29
6458
原创 elementUI中el-table表格的表头样式错位
版本：element-ui 2.12.0问题描述：使用elementUI的el-table表格组件时，表格高度定高，内容过多时右侧会出现滚动条，然后就会出现如下图所示的列错位的样式：解决办法：在网上也找了好多方法，试了好多改样式的方式，都没有什么用，没有达到效果，最后还是采用js的 doLayout 方法，在获取到数据后重绘表格，实现了想要的效果。代码很简单，如下：templete中给表格设置 ref 属性：<el-table :data="table" ref=
2021-08-20 16:31:31
973
原创 vue + element-ui 实现省市区三级联动选择组件
1. 实现如下图所示的省市区三级联动选择组件；2. 新建公共组件文件 global-city文件夹，里面包含组件文件：index.vue，和3个js文件分别装着省市区的code值和名称3. 组件代码：index.vue<template> <div class="areaSelect flex"> <el-select :disabled="disabled" v-mod.
2021-08-18 15:26:56
2450
3
原创 vue中强制刷新页面的方法？
答：有两种方法：（1）this.$router.go(0)；// 简单粗暴，可能会出现空白页（2）在app.vue中定义reload()方法：<template> <div id="app"> <router-view v-if="isReload"/> </div></template><script> export default { name: 'App'
2021-07-21 17:57:26
1803
原创 如何判断空对象？
答：（1）for...in... 遍历属性，为真则为“非空数组”；否则为“空数组”；isEmptyObj1(obj) { for (let key in obj) { return true } return false}（2）JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串；isEmptyObj2(obj) { if(JSON.stringify(obj) === '{}') {
2021-07-21 17:44:35
131
原创 vue中如何一次性监听多个数据？
答：有三种方式实现：（1）watch里面写多个监听方法；（2）将多个数据放在一个对象中，只监听这个对象的变化；（3）computed和watch连用，watch监听computed的属性：computed属性会在依赖变化后重新计算，如果我们在某个computed属性中依赖于我们想要监听的属性，当这些属性变化时，此computed属性也会被重新计算，然后只需监听此computed属性即可；利用computed属性依赖变化会导致重新计算的机制可以更加优雅的实现同时监听多个属性变化的效果，而且由于
2021-07-21 17:39:06
6159
原创 vuex和localStorage和sessionStorage的区别？
答：1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理；2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。...
2021-07-21 17:35:50
357
原创 const定义变量可以被修改吗？
答：const定义的变量存在块级作用域，且不存在变量提升，一般用于定义常量，定义的时候必须初始化。const定义的如果是基本数据类型（string，number，boolean，null，undifined，symbol），定义后就不可再修改，如果修改，会报错。对象是引用类型的，const定义的对象 obj 中保存的是指向对象 obj 的指针，这里的“不变”指的是指向对象的指针不变，而修改对象中的属性并不会让指向对象的指针发生变化，所以用const...
2021-07-21 17:14:37
2531
原创 CSS面试题整理（仅供参考）
1. css盒模型？答：盒子模型的概念盒子模型（box model）。网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。盒子模型的组成元素的内容（content）元素的内边距（padding），内容与边框之间的距离元素的边框（border）元素的外边距（margin），边框与外部元素之间的距离盒子模型的分类分为 ： W3C标准盒子 、IE盒子box-sizing的取值来切换盒模型，它的取值可以为content-box、border
2021-07-21 16:50:20
543
原创 JavaScript面试题整理（仅供参考）
1. 原生js基础？2. js的数据类型有几种？答：8种：Number，String，Boolean，Null，Undefined，Object，Symbel，Bigint3. 闭包及实际案例？答：变量的作用域无非就是两种：全局变量和局部变量。"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。闭包就是能够读取其他函数内部变量的函数。闭包简单理解成"定义在一个函数内部的函数"。
2021-07-21 16:22:56
377
1
原创 VUE相关面试题整理(仅供参考)
1. vue主要特点？常用指令有哪些？答：vue两大特点：响应式编程、组件化。vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。vue的缺点：Vue 不缺入门教程，可是很缺乏高阶教程与文档还有书籍；VUE不支持IE8；生态环境差不如angular和react；社区不大。2. vue生
2021-07-21 15:34:40
580
原创 小程序开发问题整理
1. picker使用时回显问题<picker bindchange="bindNetworkPickerChange" mode="selector" range="{{networkList}}" range-key="corpName" value="{{corpIndex}}"> <image class="selection-image" src="../../images/icon-wangdian@2x.png"></image> <
2021-07-21 15:11:51
103
原创 小程序中引入vant组件库
vant组件库链接：https://vant-contrib.gitee.io/vant-weapp/#/home1. 在小程序终端：通过 npm 安装npm i @vant/weapp -S --production2. 修改 app.json{ ..."setting": {..."packNpmManually": true,"packN...
2021-07-21 14:56:31
237
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人