- 博客(48)
- 收藏
- 关注
RSS订阅原创 当表格数据量过大的时候，如何使用不分页进行展示
摘要：本文介绍了一个基于虚拟滚动优化的表格组件elTableVirtualScroll.vue，通过仅渲染可视区域内容来解决大数据量表格渲染性能问题。该组件利用滚动监听和动态计算技术，实现数据懒加载和DOM节点优化，同时支持自定义高度、缓冲区和节流时间等参数。使用案例展示了如何通过@change事件动态更新可视数据，有效提升大型表格的渲染效率和用户体验。组件核心功能包括：动态计算渲染范围、尺寸自适应、滚动定位和性能优化，适用于需要展示大量数据但又不希望分页的场景。
2025-12-17 09:44:52
217
原创 使用JavaScript来动态添加或改变父元素的类或样式。
这段代码使用querySelectorAll选择所有类名为'exhibitionBoard'的元素，然后通过forEach遍历每个元素，向其父节点添加一个名为'parent-class-to-add'的CSS类。这是一种批量操作DOM元素的方法，常用于动态修改页面样式或结构。
2025-12-15 15:00:50
91
原创 在Vue.js中实现列表的拖动功能,使用第三方库如vuedraggable（基于Sortable.js）
本文介绍了如何使用VueDraggable实现列表拖拽功能。首先通过npm安装vuedraggable，然后在模板中使用<draggable>组件包裹可拖拽元素，通过v-model绑定数据列表。组件提供了end事件回调，可通过比较新旧索引判断元素位置是否改变，从而执行相应操作。该方案简洁高效，适合需要实现拖拽排序功能的Vue项目。
2025-12-15 14:58:42
157
原创 两个表格进行相互联动
本文介绍了一种实现两个表格（A、B）数据联动的方案。当A表格的复选框被选中时，B表格新增对应数据；取消选中时，B表格删除对应数据。关键实现包括：1）A表格数据重新加载时，通过toggleRowSelection方法同步B表格选中状态；2）处理全选操作时，通过遍历比对两个表格数据实现同步；3）使用getObjectArrayDifferenceById方法对比新旧选中数据差异，精准更新B表格；4）B表格提供删除功能，同时取消A表格对应行的选中状态。该方案通过维护activeTable和tableTempora
2025-12-15 14:50:55
194
原创 表格单元格输入框转换-其一
2. 还有一个需求是： 某个字段可以编辑，但是鼠标也可以点击，进行链接跳转。这样当我们鼠标进入到单元格的时候，单元格就会立刻变成了输入模式了。例如：1. 当一行不是输入框，则是下拉框，那会遇到：当行变成下拉框的时候，我们鼠标进行选择的时候，行数据就立马又变成了数据。在页面进行渲染的时候，我们要先把showInputs弄成一个跟表格数据一样长度的数组，并且赋值为false。但是表格仍会监测到我们的鼠标离开了单元格了。这样就可以避免我们鼠标进行选择的时候表格监测到进入别的单元格了。
2025-10-24 11:03:22
402
原创 vue列表实现拖动功能
一个列表，当我们想用拖动实现排序时，可以借用第三方库，例如：vuedraggable（基于Sortable.js）2. 在使用文件中引用。1. 当然是先安装喽。
2025-10-24 10:02:54
149
原创 element复选框表格，实现shift多选
需求： 对表格数据进行批量处理的时候，即使有复选框但是也得需要一个一个选。解决： 点击一行之后摁住shift，再选择另一个，两条数据之间的则为选中。
2024-01-12 15:28:23
862
2
原创 js两个对象数组合并。并且去掉里边某个属性相同的对象
请注意，这种方法会根据指定的属性进行去重操作，但是它只会保留第一个出现的对象，后续出现的对象将被忽略。如果您需要保留最后出现的对象或者其他去重规则，请根据具体需求进行相应的调整。要合并两个JavaScript对象数组并去除其中某个属性相同的对象，您可以使用。以下是一个示例代码，演示了如何合并两个对象数组并去除其中某个属性相同的对象。最后，我们将去重后的合并数组打印到控制台，即可看到结果。方法将两个数组合并，然后使用。方法对合并后的数组进行筛选。方法的回调函数中，我们使用。中的对象是否具有相同的。
2023-12-26 11:13:58
1769
原创 element:tree:default-expand-all属性无法动态渲染
element:tree:default-expand-all属性无法动态渲染
2022-10-18 16:43:57
1591
原创 vue + ajax请求下载zip文件
1. 在api文件中写接口。用于得到后台给到的数据// 证书批量下载export function zipDownload(query) { return request({ url: '',//接口 method: 'get', params: query, responseType:'blob'//服务器返回的数据类型 })}注意：responseType:'blob'//服务器返回的数据类型2. 就在Vue中：zipDownload(th
2022-05-17 16:04:10
678
原创 elementUI-input输入框change事件添加其他参数
需求：在下拉框值改变的时候，我们需要记住改的值得index，并且根据index找到下拉框数组对应数组中的对象，改变对象其他参数的值问题：elementUI中，change事件值携带了value，如果我们写成@change=“changeValue(value,index)",代码则会直接报错解决办法：@change="((val)=>{changeValue(val, index)})"通过箭头函数来进行传参...
2022-03-22 11:18:29
4264
原创 ui-app安装问题一
uniapp 运行到微信小程序 ：[error] 工具的服务端口已关闭。要使用命令行调用工具,请在下方输入 y 以确认开启当安装好HbuilderX和微信web开发者工具之后，当创建好uni-app项目后，之后运行则报如上边的错误。则需要我们手动打开微信开发者工具->设置 ->安全设置，将服务端口开启...
2022-03-01 11:49:43
168
原创 mac m1如何安装nvm并遇到的问题
# 在安装nvm的时候，先在终端确定是否存在~/.bash_profile, ~/.zshrc, ~/.bashrc这三个文件。在终端输入lsls -a #展示所有文件如果不存在上述文件，则进行新建touch ~/.bash_profile# 安装curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash假如执行nvm -- version成功显示了版本号，就说明你很幸运
2022-02-28 16:40:12
742
原创 js定位方法
先创建一个js文件，编写好该方法。之后页面哪里需要就直接引入/** 弹窗偏移* x 偏移x轴坐标* e 要显示的dialog的id* */function deviation(x, e, margin = '128px 0 0') { const dialog = document.getElementById(e).children[0] let left = x - dialog.clientWidth / 2 const boundary = x + dialog.clie
2022-02-22 16:40:24
1932
原创 vue-插槽分发内容
写文章之前呢。我想扯点杂事。今天是2020年9月30日下午两点半左右，距离我下班还有三个小时。明天就是国庆节了，你们会看大阅兵嘛？反正我会每年都看。看我们中国人的将领是多么的气宇轩昂。每次看的时候我的鸡皮疙瘩都一直往外冒。今年我也要准时收看。好了，现在正式学习一下把。我们在定义多个插槽时。我们可以使用name属性进行区分的。如果没有name属性。则就会放入到默认的插槽中，而如果name没有匹配的，则内容就不显示。上代码：<!DOCTYPE html><html lang="en"&
2022-02-16 10:52:12
189
原创 flex布局使用
第一： 使用Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。display: flex行内布局也可以使用flex布局display: inline-flex但是我们需要注意一点：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。第二：属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-conten.
2022-02-16 10:50:24
229
原创 formatter使表格中的时间格式化
要是给我们得数据格式为：2021-07-02T14:19:59+08:00，然而想在表格中以“YYYY-mm-dd HH:MM:SS”形式展示，则需要用到formatter来进行格式化。<el-table-column label="开始时间" align="center" prop="startTime" width="180" :formatter="timeFormatter"/>timeFormatter(row, column, cellValue, index) {..
2022-02-15 17:09:54
1413
原创 better-scroll的使用
better-scroll常见的html<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul></div>可以用图来表示：绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那
2021-08-03 16:04:19
626
原创 用eclipse打war包
在服务器上部署项目的时候，都需要把项目弄成war包进行部署。但是eclipse怎么把项目打包成war包呢？第一步右击需要打包的项目。选择：export->export之后就弹出了该页面第二步在选择框中，输入war。选择WAR file，点击Next第三步Web project：为war包的名称Destination：为存放的路径。之后点击finish就可以了。...
2021-05-20 15:04:05
7474
原创 filter、map、reduce函数的说明
在进行遍历的时候for循环给我一种很麻烦的感觉。而我先发，for里一般都会加一个if判断。这样在后期代码读取的时候很头大。代码很长。然而。filter函数，map函数，reduce函数就能解决这个问题，现在通过一个例子来简单说明：现在我们有个数组n，我需要对这个数组进行要求：把数组中小于100的找出来把新的数组的每个数乘以2求出总和我们先用原来的方法let n=[20, 40,333,222,666,30,70];let newNums=[]; for(let i of n){
2021-05-18 14:15:17
233
原创 vue中的key值
vue会尽量复用已有的dom，在这个例子中，当state的值发生改变时，input并不会重新渲染(如果input框中有输入值时，不会改变)，解决办法就是input 添加key属性。
2021-05-10 17:14:44
169
原创 如何修改vue中的数组中的值
在JavaScript中，我们想要更改一个数组中的值得时候我们可以利用索引直接设置，例如：name.items[index] = newValue当我们修改长度，例如：name.length = newLength然而当我在vue中想这样操作的时候，很抱歉，不可以。出错了。疯了得亏我有度娘，查起来。…皇天不负有心人，终于让我找到了。方法一我们可以通过，vue.set实列方法来改变，前提是得引入vue的包。样式语法：Vue.set(example.items, indexOfItem, ne
2021-04-08 16:54:30
6980
原创 使用模板字面量创建包含变量或表达式的字符串
禁止在常规字符串中出现模板字面量占位符语法 (no-template-curly-in-string)ECMAScript 6 允许程序员使用模板字面量创建包含变量或表达式的字符串，在***两个反引号之间***书写表达式比如 variable，而不是使用字符串拼接。在使用模板字面量过程中很容易写错引号，写错成"{variable}，而不是使用字符串拼接。在使用模板字面量过程中很容易写错引号，写错成 "variable，而不是使用字符串拼接。在使用模板字面量过程中很容易写错引号，写错成"{variable}
2021-02-01 12:06:43
410
1
原创 calc函数、ceil函数和sqrt函数
calc函数calc（）函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算；calc()函数支持“+”，“-”，“*”，“/”运算；calc()函数使用标准的数学运算优先级规则。ceil函数定义和用法ceil()函数向上舍入为最接近的整数。向上取整数的时候，正数，则直接将当前正数加一；负数，则将整数后面的数据抹除；整数，则不变。类似的函数：floor()函数为：向下
2020-12-30 09:44:09
1287
原创 关于CSS的一些属性
text-decorationtext-decoration属性规定添加到文本的修饰可能的值none：默认，定义标准的文本；underline：定义文本下的一条线；overline：定义文本上的一条线；line-through：定义穿过文本下的一条线；blink：定义闪烁的文本；inherit：规定应该从父元素继承text-decoration属性的值。outlineoutline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用注释：轮廓线不会占据空间，也不一
2020-12-23 09:49:30
371
原创 Expected consistent spacing standard/object-curly-even-spacing报错
报错提醒# 修改这个意思是可能是项目里用了格式校验的工具，然后提示我的空格的格式写的不对把错误的地方改成：
2020-12-10 10:17:18
2981
原创 代码对比找不同
我们在学习的时候总会找几个例子。按照例子进行开发一些项目。但是我们在开发完了之后，总有些功能和实例有所不同。这时候我们就对照代码一个一个看我们到底是HTMl写的不对，JS写的不对还是CSS不对啊。这样就很麻烦。身为一个懒惰的人。我怎么能让我这么受累呢。我就在网上找可以实现代码找不同的软件。辛辛苦苦被我找到了。是个在线的功能Diffchecker目前使用还是挺方便的。希望对你们有帮助哈。...
2020-12-07 10:56:14
1503
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人