- 博客(164)
- 收藏
- 关注
RSS订阅原创 vue3笔记
通过扩展于标准HTML的模板语法，我们可以根据JavaScript的状态来描述HTML应该是什么样子的。当状态改变时，HTML会自动更新。
2024-04-17 16:55:43
285
原创 antdv下拉框即可手动输入又可下拉选择
最近有个需求是下拉框既可下拉选择也可手动输入，antd 的a-select组件不能直接使用，所以需要基于插件再修改一下。
2024-01-30 17:00:53
472
原创 echarts 柱状图数据过多时自动滚动
当我们柱状图中X轴数据太多的时候，会自动把柱形的宽度挤的很细，带来的交互非常不好，我们可以用dataZoom属性来解决。如果需要自动滚动，需要再加个定时器，还可以在标签上设置鼠标放上去停止滚动。简易的版本，横向滚动。
2024-01-26 17:27:04
429
原创 antdv 锚点踩坑
背景：使用antd的锚点时，按照官方文档的用法配置之后发现锚点组件的锚点Title位置没办法随着我的页面滚动而变化，但是点击Title跳转具体锚定位置的功能却是没有问题的。解决方法：getContainer绑定滚动范围容器。
2023-10-18 09:17:39
715
原创 js将带标签的内容转为纯文本
创建一个临时 DOM 并给他赋值，然后我们使用 DOM 对象方法提取文本。背景：现需要将富文本的所有 html 标签全部删除得到纯文本。
2023-10-17 09:59:50
389
原创 a-select下拉框因为数据量太大造成卡顿的问题
实际需求：在项目中一个下拉框中需要展示10000条数据，这10000条数据去后端查询虽然比较快，但是将查询结果返回给前端需要进行渲染，前端就会造成卡顿的现象，这时候就可以使用滑动加载只渲染总数据前100条数据以保证不卡顿。然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后通过select下拉框popupScroll事件，下拉列表滚动时的回调，每次回调时都添加一部分数据来解决下拉框的卡顿问题。
2023-05-12 16:48:47
739
1
原创 vue实现html格式（富文本编辑器）导出word
目录1.导入需要的包2.引入3.点击事件实现导出html-docx-js和file-saver2.引入3.点击事件实现导出
2022-06-24 09:40:55
2086
2
原创 echarts仪表盘式进度条
效果图如下：let myChart = echarts.init(this.$refs.echarts); let value = (this.data.yh_zg / this.data.yh_total*100).toFixed(2); // 绘制图表 let option = { radius: '480%',//仪表盘放大，默认的图太小了 series: [ // 背景 { .
2022-05-09 14:16:11
2799
原创 js数组根据时间排序
let process = [{label:'公告开始时间',time:'2022-04-26 14:29:38'},{label:'保证金交纳截止时间',time:'2022-04-29 00:00:00'},{label:'公告结束时间',time:'2022-04-30 14:29:38'},{label:'竞价开始时间',time:'2022-04-28 00:00:00'},{label:'竞价结束',time:'2022-04-29 14:29:38'}]process = proc.
2022-04-27 10:47:00
345
原创 css使用伪类元素:after绘制三角形
实现效果如下： .ant-radio-wrapper-checked{ border-bottom: 2px solid #1890ff; position: relative; &:after { position: absolute; bottom: -16px; left: 40%; content: ' '; border: 8px solid transparent; border
2022-04-24 09:49:36
1737
转载 echarts legend图例显示数值和百分比
在legend中以回调函数形式配置formatter： formatter: function(name) { var data = option.series[0].data; var total = 0; var tarValue; for (var i = 0; i < data.length; i++) { total += data[i].value...
2022-04-13 15:46:28
6480
1
原创 vue中$ref取值有时是对象，有时是数组
在vue项目，$ref取值时发现，有时是对象有时是数组，以前没有注意到这个细节问题，今天又写了固定的ref名称，又写了for生成的ref名称。原因：vue中$ref取值，静态的ref读取到的是dom对象，而for循环生成得ref，读取到的dom对象是一个数组。官网解释：...
2022-04-07 10:17:17
1580
转载 vue过滤器将阿拉伯数字转化为汉字
numberfilter是过滤器的名称；关联项目{{index+1|numberfilter}}过滤器的写法：filters:{ //将阿拉伯数字转换为汉字的算法 numberfilter:function(num){ const changeNum = ['零','一','二','三','四','五','六','七','八','九']; const unit = ['','十','百']; num = parse
2022-02-21 15:35:25
651
2
原创 antd setFieldsValue给变量赋值
setFieldsValue（{[(()=>变量名称)()]：值}）let node = 'project_'+Number(i+1);this.meetingForm.setFieldsValue({[(()=>node)()]:this.meetingForm.getFieldValue("project_"+Number(i+2))})
2022-02-15 16:07:02
1305
原创 antd-vue 树结构默认展开第一个节点
在官方文档看到有defaultExpandedKeys这个属性，那么我们将默认展开的树节点设为树的第一个节点的key就可以。实现代码如下：<a-directory-tree :tree-data="fileTree" :defaultExpandedKeys="[fileTree[0].path]" @select="onSelect" :replace-fields="{title:'name',key:'path'}"></a-
2022-01-20 11:49:20
3021
原创 antv G6绘制流程图
先贴上实现的效果图G6官网，按照官网可以绘制出简单的流程但是当实际绘制流程图时，简直是要被连接线的折点给搞崩溃<template> <div id="mountNode"> </div></template><script>import utils from "@/plugin/utils";import G6 from '@antv/g6';import insertCss from 'inse..
2021-12-15 17:40:05
8298
1
转载 解决css font-size设置小字体不生效
使用font-size设置字体，发现最小只到12px，设置小于12字体也不会再缩小了。原因是Chrome以及Chromium内核的浏览器在中文语言下最小字体只能是12px，大部分浏览器都是如此。解决方案：使用transform:scale()缩放属性来实现。/* 小于12px 的字体 */.txt { -webkit-transform: scale(0.5)}兼容写法（有的浏览器允许设置小于12px的字体，那么你需要额外写一个类）/* 优先采用 -webkit-tra...
2021-11-16 09:52:12
6393
原创 解决antd-vue表格批量操作选中框仍残留的问题
对数据批量操作成功，将选中的值selectedRowKeys值清空后，值虽然为空但是选择框依旧是选中状态，下面是解决方法操作成功后将值清空这样写就能将选择框
2021-11-13 21:31:51
2346
转载 vue递归组件
1、首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。既然要用递归组件，那么对我们的数据格式肯定是需要满足递归的条件的。就像下边这样，这是一个树状的递归数据。 [ { "name": "黄焖鸡米饭111111111",
2021-09-18 16:46:22
421
原创 数组map遍历是否改变原数组的值
查map方法的时候，总能看到map方法不会修改原数组，会得到一个新数组并返回。但原数组真的不会修改吗？最近写代码的时候发现一个问题：进行下面操作之后原数组modal_content的值也被改变了。在网上搜了一下，原来是上面的map方法不够“纯粹”，实际上还是直接修改了每个item的属性，如果不想影响原数组，应该这样写：this.modal_beforeContent= modal_content.map((item)=>({...item,disabled:true}))我们对.
2021-09-18 10:07:26
2591
5
原创 2021-08-23
1.更新子组件props 大多数人会通过 $emit 触发自定义事件，在父组件中接收该事件的传值来更新 prop。child.vueexport defalut { props: { title: String }, methods: { changeTitle(){ this.$emit('change-title', 'hello') } }}parent.vue...
2021-08-23 17:17:39
58
转载 JS数组小技巧
1.数组置空数组置空？这不是基操吗？我直接甩一手代码就问怕不怕let arr = [1,2,3]arr = []其实啊arr=[]是将arr数据引用到空数组[]中，其他引用arr数据的变量是不受影响的。这就意味着，数组先前的内容依旧保存在内存中，当数据量比较大时，可以会造成内存泄漏。那么如何避免类似的隐患？let arr = [1,2,3]arr.length = 0这样就可以彻底清空arr数据的内容，先前引用arr数据的内容也会一并消失。2.数组头部插入数据数.
2021-08-17 09:45:59
185
原创 vue 的 this.$refs 为undefined
"关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。"也就是说 ref 只有等页面加载完成好之后你才能调用 this.$refs。解决方法：如果在method中，那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用，这样就可以了...
2021-08-13 10:55:05
536
原创 解决vue中watch监听第一次数据变化失败的情况
项目中，第一次进去数据不渲染，第二次才渲染。watch: { 'detail':{ immediate: true, // immediate选项可以开启首次赋值监听 handler(newVal, oldVal) { console.log(newVal, oldVal) this.tableData = newVal.progress; this.tbbh = newVal.tbbh;
2021-08-09 09:05:22
980
原创 前端转换时间格式2021-08-01T13:12:17.870589Z
var time = 2021-08-01T13:12:17.870589Z;var data= new Date(time).toJSON();var creationTimeStr= new Date(+new Date(data) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 转换为2021-08-01 13:12:17...
2021-08-07 14:01:16
1985
转载 layui树形表格treetable
treetable树形表格是基于LayUI开发的组件，所以需要先用Layui引入一下文件。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev.
2021-07-27 11:22:36
3519
2
原创 替换树型数据字段名
原来的数据格式data1 = [{ title: '江西' ,id: 1 ,children: [{ title: '南昌' ,id: 1000 ,children: [{ title: '青山湖区' ,id: 10001 },{ title: '高新区' ,id: 10002 }] },{ title: '九江' ,id.
2021-07-27 10:48:27
349
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人