- 博客(12)
- 收藏
- 关注
RSS订阅原创 Handsontable自定义格式校验
需求： 表格数字校验规则后端不支持科学计数法，输入后报错货币或会计专用格式粘贴到 Handsontable 单元格中默认是字符串格式，如 30,000，需要自动转换成正常的数字格式支持小数点前十位，超过报错，小数点后五位，超过只截取前五位所用到的语法：解决方案：<template> <div id="app"> <hot-table ref="hotOfGoal" id="hot" :settings="goalHotSettings">
2021-04-29 14:23:05
2017
1
原创 Handsontable添加操作按钮
需求： 要求表格第一列添加删除按钮，点击按钮删除该行数据。并且前三列固定在左侧不随着滚动条滚动，前三列内容不能编辑。<template> <div id="app"> <hot-table ref="hotOfGoal" id="hot" :settings="goalHotSettings"></hot-table> </div></template>步骤一： 固定左侧前三列不能水平滚动，设置属性 fixed
2021-04-29 11:07:08
1952
3
原创 Vue项目中使用Handsontable
需求： 页面中表格要做成可编辑功能，要求在页面中可以像在Excel表格中一样可进行复制、粘贴、添加、删除等操作，可以将Excel表格中的内容通过一次复制就能全部粘贴到页面表格中。Handsontable介绍： Handsontable是一个具有电子表格功能和外观的数据网格。Handsontable是用JavaScript编写的，适用于最流行的框架，如Angular，Vue和React。可以使用自定义插件轻松修改或扩展它。它使用JSON格式绑定到任何数据源并处理大量记录。它支持过滤，排序和CRUD （创建
2021-04-28 17:07:32
5035
4
原创 为echarts标题添加点击事件
为echarts标题添加点击事件需求描述： 如图，两张图表整合到一起，要求点击标题切换对应的图表。解决思路： 切换功能必须写在echarts里面，否则下载保存的图片就会没有标题，但echarts里面没有提供类似的现成的功能，可以设置两个title，用不同的字体颜色做区分，注册点击事件，当点击这两个title的时候，切换数据和展示。解决步骤：在option里设置两个title，并设置下载时保存的文件名let textStyle1 = { fontSize: "16", colo
2021-04-15 15:21:23
9034
3
原创 解决echarts x轴数据太多造成重叠的问题
解决echarts x轴数据太多造成重叠的问题问题描述： x轴数据太多，且坐标轴标签文字较多，想要把数据全部展示出来会造成文字重叠。解决思路： echarts提供了dataZoom组件用于区域缩放，但下载的截图只能体现当前展示的内容，可以做成默认正常展示前几个，收缩到一定程度的时候改变axisLabel的角度，斜着展示。解决步骤：控制展示文字长度，设置axisLabel，如果字符串长度大于6，则中间的内容用‘…’代替option.xAxis.axisLabel = { show: tru
2021-04-15 14:13:17
18230
原创 封装一个可手动取消的axios请求
封装一个可手动取消的请求需求描述： 文件上传过程中，不断请求一个接口，获取实时的导入结果，并以进度条的形式展示在页面上。思路： 设置计时器，不断向后台发起请求，一旦返回的请求结果为100%就清除计时器，这时会有大量正在pending中的请求，会占用大量的资源，需要手动取消请求。封装请求： 以get请求为例，与普通请求相比会多设置一个cancelTaken。export const getRequestCanCancel = (url, params, that) => { let a
2021-03-05 15:46:20
416
2
原创 iview表格表头上添加icon图标
iview表格表头上添加icon图标需求描述： 如图，在表格表头处添加icon图标，并且鼠标悬浮时有提示语。解决方案： 使用iview表格中自带的 renderHeader 函数，其用法和 render 类似，代码：<template> <div> <Table :columns="tableColumn" :data="tableData" class="honorTable"> <template
2021-03-02 13:58:04
2286
原创 elementUI表格带有icon图标的内容超出隐藏
elementUI表格带有icon图标的内容超出隐藏问题描述： elementUI表格中提供了 show-overflow-tooltip 属性隐藏表格中过长的内容，并显示tooltip，但如果内容后面有icon图标或其他操作按钮的时候，设置这个属性会连带着这些操作按钮一起隐藏，无法满足我们的需求。不做处理会自动换行：设置 show-overflow-tooltip 属性图标会被隐藏：解决思路： 给文字内容标签设置最大宽度超出隐藏，超出时显示tooltip文字提示<el-table-co
2020-10-13 14:43:50
1125
1
原创 Promise语法实现页面元素延时渲染问题
Promise语法用例解析需求： vue项目中将页面中某一元素固定定位在home页面的右上角，用户名标签的后面。问题思路： 用户名是通过接口异步获取的，需要获取到用户名对应的元素的宽度之后，再调整该固定定位元素的右偏移量right。解决方法一：直接在home页面获取用户名的接口请求成功之后，查找到该元素并进行赋值操作。但这个接口只调用一次，切换到其他页面，再切换到有该元素的页面上的时候，该元素相当于销毁后再创建的，之前动态添加的css属性将不再起作用。解决方法二：用 setTimeOut 做延时
2020-09-18 17:02:11
956
原创 iview级联选择器多选功能的替代
iview级联选择器多选功能的替代问题描述： iview组件中级联选择器没有提供多选功能， 无法满足需求。解决思路： 1、 第三方组件cascader-multi，可以实现多选功能，但有一些无法解决的问题，比如选择了上个节点中子节点中的内容，再选择当前节点，之前选择的会被清空， 无法满足需求。2、使用iview中的树形控件来实现多选功能。注意点： 1、默认展开所有子节点，要在数据中添加expand字段，并设置为true。2、树形控件设置 multiple、show-checkbox 属性为tru
2020-09-07 18:15:17
2364
3
原创 iview级联选择器数据量较大时渲染卡顿问题的解决
iview级联选择器数据量较大时渲染卡顿问题的解决问题还原：在抽屉中加载多个级联选择器造成页面渲染卡顿。产品要求级联选择器可以选择任意一级。解决思路：iview提供了load-data属性异步加载子选项。 设置属性 change-on-select 点任何一级都可以选择。产生的新问题：设置属性change-on-select为true时，在编辑页面时只会回显第一级。解决思路：为级联选择器注册 on-visible-change事件，展开和关闭弹框时触发，展开时设置
2020-09-07 13:05:40
2873
1
原创 基于iview组件实现标签选择器单选功能（可点击取消）
基于iview组件实现标签选择器功能功能需求：需要若干选项按钮，选中后将相应的内容显现出来，单选，第一次点击选中，再次点击取消选中。解决思路：使用iview RadioGroup组件可满足点击选中、单选的功能，其余功能进行魔改<RadioGroup v-model="RadioGroupData" type="button" class="recommandStyle" size="small"> <Radio :class="{'cancelSele
2020-09-07 11:34:14
2078
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人