vue
文章平均质量分 51
vue相关
qdcxy0
这个作者很懒,什么都没留下…
展开
-
uniapp中上传图片
uniapp上传图片一、使用ColorUI二、上传图片1、html代码片段2、methods中代码片段:2.1 选择图片2.2 上传图片传递 formdata 格式的图片数据到后台2.3 预览图片2.4 取消上传 删除图片一、使用ColorUI在uniapp项目中使用了ColorUI的一些样式,所以就在这里再记录一下使用方法uniapp项目中引入ColorUI :参考链接ColorUI文档colorui 下载连接大致流程:先去官网下载colorui压缩包,解压到本地将里面的c原创 2021-08-24 17:27:39 · 6033 阅读 · 2 评论 -
v-chart柱状图点击改变颜色
ve-histogram点击时修改颜色完整代码展示效果完整代码<template> <ve-histogram ref="chart_histogram" height="380px" style="margin-top:50px" :width='chartWidth' :data="chartData" :setting原创 2021-04-13 12:10:33 · 1110 阅读 · 0 评论 -
解决el-table大数据表格卡顿问题
解决el-table大数据表格卡顿问题使用umyui中的表格组件使用umyui中的ux-grid树表格使用umyui中的表格组件umyui官网当u-table元素中注入data对象数组后,添加use-virtual属性开启虚拟,同时设置row-height行高(它有默认值,请看文档),同时必须给定height,或者max-height。使用umyui中的ux-grid树表格api与elment-ui中表格的api使用方法差不多...原创 2021-03-18 13:35:26 · 3669 阅读 · 0 评论 -
vxe-table列宽、错位问题解决
vxe-table列宽、错位问题解决问题解决方法1解决方法2问题在项目中切换标签页时,vxe-table不能自适应页面宽度,设置了最小宽度就只能安最小宽度显示表格,不能自适应显示解决方法11、vxe-table中添加属性::auto-resize="true" 就可以自动重新计算表格,默认是关闭的<vxe-table auto-resize ... ></vxe-table>解决方法22、使用手动调用 recalculate 方法去重新计算表格使用了k转载 2021-02-26 15:28:07 · 9611 阅读 · 0 评论 -
vxe-table行列计算
vxe-table行列计算vxe-table文档实现功能实现效果图完整代码vxe-table文档vxe-table文档实现功能根据树状结构数据,在vxe-table可编辑表格表格中实现如下功能:每一行的第一列数据等于当前行数据的和;父类的每一列数据等于子类每一项相加;自定义计算的单元格禁用,其余单元格可编辑数据。实现效果图完整代码<template> <!-- activeCellMethod: 判断单元格是否禁用 --> <vxe-table原创 2021-02-03 17:27:50 · 2138 阅读 · 0 评论 -
vue实现返回页面时回到原来的位置
使用vue中的导航守卫 beforeRouteEnter 与 beforeRouteLeave beforeRouteEnter(to, from, next) { next(vm => { // 回到原来的位置 const position = JSON.parse(window.sessionStorage.getItem('position')) document.querySelector('.list-row').scrollTop =原创 2021-01-12 16:51:25 · 2585 阅读 · 0 评论 -
v-charts环图点击事件
v-charts环图自定义点击事件突出显示多块需求完整代码效果展示v-charts需求环图展示统计的数据,默认展示的块需要突出高亮显示,点击某个条件块时,若是突出显示的则取消突出显示,不是突出显示的则高亮突出显示,并根据点击的条件去后台查询数据。完整代码<template> <div class="content"> <div class="top-content"> <div class="chartBox">原创 2020-12-21 22:33:48 · 4002 阅读 · 3 评论 -
表格转图片下载
vue页面下将带有二维码的表格转成图片并下载1、生成二维码2、将html转为图片并下载3、完整代码4、完成效果要求将带有二维码的表格转为图片格式下载下来使用dom-to-image将html转为图片,详细使用方法见官方文档:dom-to-image1、生成二维码这里我是使用QRCode 、html2canvas 插件来生成的二维码前面有写一篇文章比较详细的介绍了二维码的生成,这里的代码基本上和之前是一样的// 二维码import QRCode from 'qrcode'import htm原创 2020-12-21 21:35:00 · 501 阅读 · 0 评论 -
v-charts环图不显示问题
解决v-charts环图不显示问题在vue项目中使用vant组件和v-charts组件来实现滑动展示两个不同的环图,开始的时候环图一直显示不出来,解决办法: created() { this.$nextTick(() => { // 解决v-charts不显示问题 // 调用以下的方法实现环图重新渲染 this.$refs.chart_one.echarts.resize() this.$refs.chart_two.echarts.re原创 2020-12-16 21:51:05 · 1793 阅读 · 0 评论 -
mt-cell-swipe的使用
mt-cell-swipe的使用安装使用示例1:content 使用纯文本方式(官网示例)示例2:content 使用HTML方式(开发中使用)content 使用HTML方式显示mint ui 文档安装npm i mint-ui -S使用采用按需引入:import { CellSwipe } from 'mint-ui';Vue.component(CellSwipe.name, CellSwipe);示例1:content 使用纯文本方式(官网示例)增加右滑动按钮<mt-原创 2020-12-15 22:28:30 · 733 阅读 · 0 评论 -
tree-select使用
tree-select使用安装基本使用在vxe-table中使用官方文档安装npm install --save @riophae/vue-treeselect基本使用在vue中的使用:<!-- Vue SFC --><template> <div> <treeselect :multiple="true" :options="options" placeholder="Select your favourite(s).原创 2020-12-15 21:46:13 · 3418 阅读 · 8 评论 -
在前端生成二维码下载
前端生成二维码并下载完整代码完整代码<template> <div class="ypl-flex"> <div class="invitePosterPage flex"> <button @click="downLoad">下载二维码</button> <img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" alt=原创 2020-11-16 13:02:20 · 432 阅读 · 0 评论 -
v-charts中柱状图和环图的使用
v-charts柱状图使用、环图监听点击事件及监听点击事件v-charts中柱状图和环图的使用v-charts的使用安装引入柱状图、环图柱状图的使用环图的使用环形图效果v-charts中柱状图和环图的使用v-charts的使用安装npm i v-charts echarts -S引入柱状图、环图main.js中引入// 柱状图import VeHistogram from 'v-charts/lib/histogram.common'//饼图import VeRing from 'v-原创 2020-11-03 17:39:36 · 3087 阅读 · 1 评论 -
v-charts柱状图使用
v-charts柱状图使用效果图按需引入柱状图使用柱状图效果图按需引入柱状图import Vue from 'vue'// 柱状图import VeHistogram from 'v-charts/lib/histogram.common'Vue.component(VeHistogram.name, VeHistogram)使用柱状图<template> <div class="contents"> <div class="chartBox"&原创 2020-10-09 19:29:40 · 4638 阅读 · 0 评论 -
防抖与节流
防抖与节流防抖与节流的深入理解在vue中使用防抖函数防抖与节流的深入理解1. 防抖持续触发不执行不触发的一段时间之后再执行函数防抖,这里的抖动就是执行的意思。即持续触发一个事件,不是一直去执行函数,而是等最后一次触发结束后,过一段时间,再去执行函数。应用场景:根据输入框内容去查询数据函数实现:function debounce(func, delay) { let timeout return function() { clearTimeout(timeout) // 如原创 2020-09-29 22:47:26 · 186 阅读 · 0 评论 -
动态切换样式
前端实现标签默认全选与点击标签选中切换html代码JavaScript代码样式代码整体展示效果图html代码 <div class="filterBox"> <div class="filterTitle"> 请选择 </div> <div class="filterContent"> <span v-for="(item,index) in company原创 2020-09-23 20:56:03 · 1061 阅读 · 0 评论 -
纯前端导入excel表格数据
安装插件 js-xlsxnpm install xlsx --savejs-xlsx使用js-xlsx时,前端可以将后端返回的json数据拼接成自己需要导出的格式,下载到电脑中,完全不依赖后端。导入只需像平时一样选择文件,然后解析excel表格数据,转换成json格式。<template><div class="index" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中..."原创 2020-06-18 20:51:12 · 1912 阅读 · 2 评论 -
前端导出多级表头excel
1、安装插件npm install xlsx --savenpm install file-saver --save2、使用Export2Excel.js 文件中:/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows = table.querySelectorAl原创 2020-06-18 09:20:32 · 2327 阅读 · 0 评论 -
pl-table大数据表格
pl-table是基于element ui的一个大数据表格插件,在el-tabled的功能上增加了一些功能。由于做vue前端项目页面性能优化时,需要优化表格数据太多页面卡顿的问题,发现了这个好用的插件,下面附上表格地址链接: pl-table pl-table导出数据插件还没有进行深入开发使用pl-table,等后续更新具体用法再附上代码。……...原创 2020-06-12 17:21:41 · 11300 阅读 · 2 评论 -
offsetWidth clientHeight的理解及使用
原文: https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)原创 2020-06-10 21:24:23 · 357 阅读 · 0 评论 -
npm命令
zlib: unexpected end of file解决方法运行npm cache clean --force 清空npm缓存即可决这个问题原创 2020-06-03 22:08:41 · 205 阅读 · 0 评论 -
vue移动端适配方案
一、flexible.jsflexible.js+rem进行移动端适配npm install -gvue-cli vue init webpack my-projectcd my-projectnpm run dev原创 2020-06-03 10:47:58 · 846 阅读 · 0 评论 -
表格选择列显示、拖拽排序、导出excel
1、需要提前按照拖动组件// 导出功能import { export_array_to_excel2 } from '@/utils/tableToExcel'export default { methods: { // 公共的导出方法 //第一个参数:所有的表头字段 //第二参数:选择展示的表头字段 //第三参数:表格数据 //第四个参数...原创 2020-04-26 20:47:13 · 1141 阅读 · 0 评论 -
el-tree的使用
1、要求只展开二级节点,且根据选择的节点id去后台拿数据并展示在表格中,刷新页面,并展开相应的父节点,当页面跳转后,返回当前页面,依然保持在之前选中的节点位置。将多选框设置为单选,根据点击的节点id去后台取数据。具体代码如下:<template> <div class="app-container"> //el-scrollbar 设置滚动条 &l...原创 2020-04-18 11:23:18 · 2611 阅读 · 1 评论 -
vxe-table封装多条件查询组件
1、multiQuery.vue引用了queryButton 组件<template> <div > <div sclass="button-row"> <queryButton @insertEvent="insertEvent" @doSubmit="doSubmit" @reset="reset" @save="openF...原创 2020-04-17 13:42:39 · 3140 阅读 · 0 评论 -
vue循环绘制echart饼图
1、echarts.js将饼图封装成一个组件<template> <!-- 每一个图表都有自己唯一的id,所有需要动态传入。 --> <div :id="id" :style="style"/></template><script>import echarts from 'echarts'// 引入 e...原创 2020-04-16 20:30:27 · 2734 阅读 · 2 评论 -
element table合计行不显示问题
1、表头添加方法 :summary-method="getSummaries" show-summary<el-table v-loading="loading" id="drag-table" ref="table" :data="data" :height="height" :summary-method=...原创 2020-04-14 14:20:53 · 3509 阅读 · 2 评论 -
elementUI tag标签和表格样式设置
1、在vue表格中使用 <template slot-scope="scope"> <template v-if="column.prop==='status'"> <el-tag :type="formatTagType(scope.row.status)">{{ statusArr.labelByValue[...原创 2020-04-14 09:43:25 · 7080 阅读 · 0 评论 -
vue复选框实现拖拽排序
1、安装通过NPM安装$ npm install awe-dnd --save2、插件应用在main.js中,通过Vue.use导入插件import VueDND from 'awe-dnd'Vue.use(VueDND)3、在vue2.0中使用<template> <div> <el-checkbox :indeterminate="is...原创 2020-04-07 14:35:18 · 1916 阅读 · 2 评论 -
数字金额转大写
1、表单数据绑定<el-row> <el-col :xs="24" :sm="12" :lg="6"> <el-form-item label="金额:"> <el-input :inline="true" v-model="form.detectCost" :disabled="form.dealStatus !== 0 |...原创 2020-04-02 17:30:51 · 1105 阅读 · 0 评论 -
vxe-table在vue中的使用
1、vxe-table使用editActivedEvent:编辑表格禁用状态getCode:表格点击方法//引入编码组件import codeForm from '@/components/viewComponents/codeForm' <!-- 编码弹出框组件 --> <codeForm ref="cform" :codes-no="codesNo" :...原创 2020-04-02 09:52:38 · 8853 阅读 · 0 评论 -
vue自定义拖动弹框指令
1、在main.js同级目录下新建directives.js文件// directives.jsimport Vue from 'vue'// v-dialogDrag: 弹窗拖拽 Vue.directive vue自定义指令Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { // ...原创 2020-04-01 10:55:00 · 782 阅读 · 0 评论 -
vue移动端页面demo
1、主要从webpack搭建项目开始到移动端适配原创 2020-04-01 10:15:22 · 1431 阅读 · 0 评论 -
vue多功能表格封装
以下代码有部分是看开源eladmin-web项目改写的,不足之处请大家多多指教,共同学习。eladmin-web项目地址:https://github.com/elunez/eladmin1、 index.vue<template> <div class="app-container"> <!-- 多条件查询组件 --> <que...原创 2020-03-31 16:52:44 · 1425 阅读 · 2 评论 -
vue懒加载查询组件
1、select远程查询懒加载数据<template> <div> <!-- 搜索框 --> <el-select v-loadmore="loadmore" v-model="svalue" :remote-method="querySearchAsync" :disabled="di...原创 2020-03-23 15:55:20 · 341 阅读 · 0 评论 -
vue表格重新拼装数据
1、数据处理代码只做参考,部分有修改 async init() { if (arguments[0] === undefined) { //await 必须用在async后面才有效 if (!(await this.beforeInit())) { return } } return ne...原创 2020-03-23 15:40:37 · 996 阅读 · 1 评论