- 博客(164)
- 收藏
- 关注
原创 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关注的人