是茜茜啊啊-优快云博客

原创 openlayers坐标点添加圆形、自定义图片和内容，popup弹框、添加多个text文本和样式、点聚合、清除坐标点、画闭合区域及其样式功能集合。

/在feature中添加坐标点的一些基本信息]),});//添加文字及其样式}),}), // 使用与填充相同的背景填充样式padding: [5, 10, 5, 10], // 文本周围的填充，上右下左（像素）}),//添加图片坐标点scale: 0.2}),}));});

2024-11-25 16:40:09 662

原创 Vue中ref、reactive、toRef、toRefs的区别

更新响应式数据的时候不更新界面，就可以使用toRefs，用于批量设置多个数据为响应式数据。函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想。toRef当数据发生改变时，界面不会自动更新。二、toRef、toRefs。

2024-11-01 11:39:29 591

原创 vue3 setup写不写到标签上的区别

全局注册的自定义指令将以符合预期的方式工作，且本地注册的指令可以直接在模板中使用，就像上文所提及的组件一样。在vue3种setup的写法，可以单独写setup()也可以写到script标签中，当然我们推荐后面这种。他的好处有很多，代码也简洁很多。

2024-11-01 10:36:55 415

1.官网地址：https://vuejs.org/ 中文官网 https://cn.vuejs.org/2.vue2已经于2023年12月31日停止维护。建议升级到vue.js3.0版本。打包更小，内存更小，渲染更快，并且vue3向下兼容vue2语法。3.vue3于2020年9月18日发布，代号：one piece 海贼王。4.vue3新特性：组合式API（重点），更好的支持TypeScript（熟悉），状态存储框架pinia(重点)，新组件(了解)等。

2024-11-01 10:09:57 2458

原创 vue3父子组件传值，子组件暴漏方法

父组件直接通过属性绑定的方式给子组件绑定数据，子组件通过defineProps接收函数接收。（2）在子组件中通过defineExpose暴漏方法。子组件使用：props.modelValue。去调用该自定义事件，并传递参数给父组件。绑定一个函数，通过该函数获取传过来的值。是完成事件绑定和事件监听的语法糖。（1）在父组件中获取在子组件的实例。注册一个自定义事件，而后触发。在父组件中调用子组件时，通过。

2024-10-31 11:21:43 828 1

原创 form表单校验选中数据后，校验错误不消失

this.$refs.form.clearValidate('repair_unit_name') //主动清除校验。if(this.formData.unitName){ //判断有值。form表单校验选中数据后，校验错误没有消失，但是整体保存校验却生效消失。

2024-10-21 11:16:55 194

原创 css某个样式只在指定浏览器下生效

例如：此样式只在火狐浏览下生效。

2024-10-12 13:44:31 183

原创 async、await和Promise结合使用

this.search() 结果为：异步数据异步数据1 同步数据。this.search() 结果为：异步数据同步数据。// 异步数据11 异步数据22 异步数据33。3.顺序执行多个异步请求后，执行同步强求。1.先异步，后同步，不需要返回值。2.先异步，后同步，需要返回值。

2024-10-12 11:45:35 326

原创可复制拖拽流程图

功能：如上图所示，从左侧拖拽源拖拽出模块后，在右侧显示。

2024-08-16 14:11:58 478

原创实现异形（拱形）轮播图

将其放到staic文件夹下，在vue项目中，index.html文件中引入js和css。2.根据轮播图个数，动态给可视范围的第一个轮播图和最后一个轮播图添加样式。lunbo1List为后端返回的图片列表。经调研，使用slick轮播图（官网地址。注意：还需要额外引入jquery。项目需要实现如上图所示的轮播图。1.项目引入使用普通轮播图。css：实现异性样式。

2024-08-14 16:39:24 554

原创将对象数组按对象指定字段分类为二维数字

处理结果：sortArr(arr,'age')

2024-05-07 16:03:40 314

原创 vue 表格分页打印，字体自适应大小缩放。

因表格内字数不确定，1页强制10行，有的页面很短，有的页面会超出，效果不好，需要每个单元格内大小自适应表格调整。通过计算每个单元格的大小、可容纳的文字数量与实际的文字数量的比例来动态控制每个单元格内文字的缩放比例。(3）同时要注意，字母，数字，英文标点符号，占的比例应该为字体的0.6倍左右，需要处理。单元格内字数如果超过可能容纳最多的字数，那么字体需要缩小，如果不超过，那么不需要缩小。如果字体大小超过默认字体大小，不需要改变，如果小于默认字体大小就是需要缩小的。(1) 计算每个单元格容纳的标准字体个数。

2024-04-29 08:32:24 1362 1

原创 bootstrap带左右固定列表格，列选择操作后，表头和内容无法对其问题。

然后，表头固定列失效了，因为表头固定列的宽度计算方式和内容的不一致，滑动的时候，看不到表头了。（2) 列变动后，选择列数较少时，左右固定列消失，表头和表格无法自适应对齐问题。（1）列变动后，列总数量依然较多存在滚动轴时，右侧少一部分问题。解决：通过onColumnSwitch 列切换操作时候的函数。通过属性showColumns: true,开始列选择后，后来又发现点击排序按钮后，表头和内容又对不齐了。

2024-04-26 10:54:40 600

原创 html表格导出为word文档，导出的部分表格内无法填写文字

把部门领导意见部分页面布局修改一下，红色部分使用一个td布局，同时把边框变为白色，就能写字了。导出的word如下，样式没问题，但是红色区域写不了字。

2024-04-26 10:41:52 795

原创 window.open跳转页面，之前打开的页面不再打开重复的新窗口

已有窗口不再重新打开: window.open(url,url)会打开新窗口 : window.open(url)

2024-04-17 16:53:56 1353

原创 vxe-table的编辑表格只校验临时变动的数据

表格第一次校验的时候，做了整体校验，校验不通过，当有添加行或者删除行的时候，便只校验操作行，便校验通过了。解决：只需要加上fullValidate()方法加上true即可。使用官网上的完整校验。

2024-04-15 10:11:18 578

原创 Antd 日期组件 a-date-picker 选中后无法关闭面板弹窗

3.借助:open="yearPickShow"控制日期面板的开关，借助@panelChange和@openChange完成选中后的关闭。1.设置 DatePicker 的mode="year"属性，可以实现按年的选择。2.选择完成之后，日期面板不会自动关闭，需要点击一下才行，这样的交与体验不太好。placeholder="请选择年份"-- 年选择组件 -->

2024-04-11 17:22:25 816

原创 a-form和a-form-model的区别和使用

'超过最大长度500!

2024-04-10 11:18:05 1796

原创带合并行、分组表头和分组表格导出excel

注意：表格要使用包起来，后面导出使用。未合并之前把数据处理成这样展示即可，根据后端返回的json自行处理。先要把json数据处理成一行一行的表格数据，然后再做合并行。在index.html中引入。

2024-04-02 15:55:47 1513

原创 bootstrap表格API文档

【代码】bootstrap表格API文档。

2024-03-18 15:08:47 2139

原创 zTree做拖拽移动功能，并保存数据到数据库

思路：zTree的拖拽移动功能是组件自带的，通过setting配置即可，保存到数据库则需要拿到移动节点id和目标父级id，后端去处理，把移动节点的数据挂到目标父级的下面。

2024-03-15 16:57:10 772

原创 vxe-table3.0的表格树如何做深层查找，返回搜索关键字的树形结构

（2）this.originData = 树形结构表格数据，搜索的时候，originData还是树形结构的，2.0版本的XEUtils.searchTree还是可以使用的，搜索结果是树形结构，那么把这个树形结构的搜索结果再转成扁平结构赋给表格，就能得到搜索结果也是虚拟滚动的啦。vxe-table2.0版本是提供深层查找功能的，因为他的数据源本身就是树形结构，所以深层查找查询出来也是树形结构。如果后端给你的本来就是扁平化的数据，也是一样的，你把他处理成树形结构，在页面循环使用是一样的思路。

2024-01-30 17:08:06 1383

原创 vxe-table从2.0升级到3.0，vxe-table-plugin-virtual-tree虚拟滚动失效

问题：系统一直使用的vxe-table2.0，vxe-table2.0不支持树的虚拟滚动，为了解决这个问题，引入了vxe-table-plugin-virtual-tree插件，现在系统vxe-table升级3.0，vxe-table-plugin-virtual-tree的虚拟滚动失效了。原因：查询官网，发现vxe-table-plugin-virtual-tree依赖于2.0版本，因为3.0版本已经有自己的虚拟树了，便不再在维护了。。解决：还能咋办，换树。支持虚拟滚动的树有很多。

2024-01-30 16:39:52 978

原创 vxe-table表格合并行和虚拟滚动冲突

总结：方法一：升级表格，对当前需要虚拟加载的合并行表格页面修改的不多，但是升级表格会有系统有不可预知的影响，比如一些废弃的api需要更换，我们之前用的vxe-table-plugin-virtual-tree需要依赖于vxe-table2.0，升级后组件虚拟滚动功能会失效（如何解决下一篇写）等等。具体可以自己看官网，但是他的表格功能没有vxe-table丰富，如果使用，之前的逻辑的逻辑要改的太多，便没有采用。做临时合并，我们只要把表格的需要合并状态全部计算提取出来，便可以实现合并行的虚拟滚动。

2024-01-30 15:58:35 2654

原创 input的回车键搜索，失焦搜索

a-input placeholder="输入关键字进行搜索" v-model="filterText" @blur="filterSearch" @keyup.13="filterSearch">

2024-01-17 10:14:34 582

原创 vxe-table循环的vxe-table-column 如何进行edit-rules校验

2.现在需要对hasDistribut这个字段进行校验，但是这个字段在经过循环后，已经衍生成hasDistribut_0 . hasDistribut_1 .hasDistribut_2 .hasDistribut_3等等，在data里面肯定无法直接定义了,需要在生成departList的地方将hasDistribut的校验也循环生成。edit-rules的快速校验有一个特点，就是发生了edit的表格才会校验，如果这个数据是初始化带来的的，一样可以通过校验。1.循环vxe-table-column。

2024-01-09 15:22:39 1884

实现拖拽流程图，可复制拖拽

空空如也