文章目录页面效果展开效果loading核心代码属性解析代码解析 遇到甲方爸爸一个需求，在原本的table表格中需要每一行具有下拉列表的功能，实现“指定行”展开，下拉菜单中并且含有数据属性重复的，则还需合并行。页面效果展开效果loading核心代码<el-table
:data="testSampleList"
@expand-change="expandChange"
转载
2024-04-03 06:57:25
161阅读
一、概述当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。官方示例：test.vue <template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column type="expand">
<template sl
转载
2024-04-08 12:49:37
754阅读
一、代码实现：
@row-click="handleRowClick"遍历从后台获取的 tableData,给它的每一个item加上一个控制该行展开与否的标志 expanded在刚刚绑定的点击事件中，调用表格的 toggleRowExpansion(row, expanded) 方法，第一个参数是点击的那行的数据，第二个参数是展开与否 （为true时展开，为false则收起）<templat
转载
2024-03-17 11:26:37
946阅读
写在前面数据量100条左右Tree层级4-5级节点操作卡顿时间4~5s，并伴随初始化样式失真 卡顿只存在表格内嵌树结构情况下，单独Tree组件是不存在卡顿的。卡顿原因仍在定位源码中，之所以会去排查源码是因为我用同样的数据测试element、ant-design框架均不会出现卡顿，不仅仅是无卡顿
转载
2024-06-22 14:52:06
384阅读
开发背景由于开发页面的内容较多，包含两三个表格，这样展示效果有点不乐观，因此其中一个表格的内容采用表格嵌套及表格内容折叠的方式来呈现。实现思路表格嵌套表格内容折叠点击表格【人工成本】月份下内容区的金额与天数互换实现过程最开始拿到原型的时候，看了Element的官网的el-table的嵌套和折叠效果，发现并不适用我的这个场景。表格嵌套 官网是采用了在el-table的el-table-column中
转载
2024-07-26 09:25:26
1331阅读
目录1.为什么使用数据懒加载？ 2.实现数据懒加载3.封装复用技术手段 Vue官方工具库 (仅限vue3.0使用)中的 useIntersectionObserver 核心API ：Intersection Observer（H5新增，不支持ie） 在没有这方法前使用 Element.getBoundingClien
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的。之前用bootstrap做的表格，想要实现简短列和详细列的切换。因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列可以方便的看见比较重要的几列的内容。用之前的方法<bootstrap>的话，非常简单，直接设置display的显示和隐藏就可以了。但是放在elemen
转载
2024-03-01 13:40:16
192阅读
有一段时间没更新文章了，主要是因为自己一直在忙着学习新的东西而忘记分享了，实在惭愧。这不，大半夜发文更一篇文章，分享一个自己编写的一个Vue的小组件，名叫BootPage。不了解Vue.js的童鞋可以移步我的上一篇文章《浅谈Vue.js》了解一下。BootPage组件简介其实也不是啥高大上的组件了，相反确实一个简单的表格分页组件而已，主要是自己最近项目中需要一个表格分页组件，而Vue官方组件库里分
转载
2024-09-12 20:11:49
79阅读
我们的项目是前端用vue,服务端用node.js,这个excel导出我们已经用了一年,我们目前用到的无非是图片导出,文本导出,调调excel单元格距离等.这个node端的封装是经过同事不断的review(感谢同事),俺不断的修改优化后的代码,当时也是我第一次接触node.js,只想告诉你,用它,稳稳的！node.js服务端代码1.拿到需要导出的数据之后如何使用(假数据模拟,下面是页面) i
一、嵌套表的定义： 嵌套表是表中之表。一个嵌套表是某些行的集合，它在主表中表示为其中的一列。对主表中的每一条记录，嵌套表可以包含多个行。在某种意义上，它是在一个表中存储一对多关系的一种方法。考查一个包含部门信息的表，在任何时间内每个部门会有很多项目正在实施。在一个严格的关系模型中，将需要建立两个独立的表department和project。 嵌套表允许在department表中存
转载
2024-09-26 22:07:05
35阅读
相信很多人都会遇到这样的需求：当表格按照某几个列分组时，需要为组添加展开和折叠的操作。最初展现表格的时候只展现最外层分组，然后点击展开后可以查看分组内的明细情况。先来一张效果图，然后再看具体如何实现： 话不多说，我们来看看这个功能如何实现。首先创建示例表 CREATE TABLE [dbo].[DetailReportTestData]
(
[Category1] [nvarc
转载
2024-09-22 20:09:46
415阅读
前言：这是一个可以在 el-table 中显示、隐藏密码，并且具有重置密码的功能。虽然办法有点笨，但是确实是能实现功能的！本大二学生还需努力！1. 功能起源element el-input 组件中有一个 show-password 属性，此属性可得到一个可切换显示隐藏的密码框，但是此属性只能使用在 el-input 组件中。但是我在写项目中，有一个功能是在表格中可以显示隐藏密码，于是 show-p
转载
2024-03-26 07:52:59
234阅读
1、安装依赖（npm不行的话用cnpm）npm install --save xlsx file-saver2、在js引入头文件 import FileSaver from 'file-saver' import XLSX from 'xlsx'3、在
原创
2021-09-09 16:01:30
917阅读
1.看懂图表 人习惯按照Z字形来看一个图表，最重要的内容最好放在左边和顶端来直观的显示出来。 如图这是一个常见的图表，由这些基础元素组成。 分别介绍一下每个图表吧散点图：显示出数据之间的相关性，数据量越大越直观折线图：显示时间序列的数据，可以看到随着时间发展的趋势柱状图：可以对比不同类别的占比区别，还可以看出每个类别子成分的占比情况，但是容易让客户产生视觉压力（
转载
2024-08-01 12:31:29
93阅读
本文的主要思路是判断dom元素的高度有没有超过规定高度，如果超过规定高度的话就通过动态绑定class的方法绑定溢出省略的样式，然后通过展开和收起按钮控制状态的改变来实现是否绑定溢出样式来实现展开与收起，该思路能够简单的实现展开与收起的功能。 本次实现的是溢出两行省略，以下是溢出两行省略的css代码.close {
text-overflow: -o-ellipsis-last
官网：http://doc.sougn.com下载地址：https://pan.baidu.com/share/init?surl=P0O9sjfzC8nuQxirDfjW1A 密码：4oev先看一段视屏，了解一下系统视屏地址：https://sougn-test.oss-cn-beijing.aliyuncs.com/media/kk%202020-02-12%2019-06-35.
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格
原创
2023-10-08 10:46:08
285阅读
前言当我们的UI界面显示出来后，需要和用户进行交互，即用户点击某个控件，比如是一个按钮，需要跳转到另一个界面的时候，如果直接跳转到另一个界面，功能是实现了，但是未免有些生硬，因为用户体验不是很好，这时就需要动画的润色了，添加一个好的转场动画能让用户使用起来拥有更好的体验，并且动画还可以让一些耗时的任务看起来不那么“耗时”，比如当用户下载一个文件时，假如没有动画，系统一直卡在下载当那个页面（其实系统
需求： 想要实现这样的一个需求，左边是组件库。中间是展示。拖拉组件到中间就形成一个组件。刚开始用的form-create,发现不行，又用的form-create-design,但vue3版本的只有element plus库，系统刚开始用的ant-design,而且左边我只需要单行输入框和多行输入框组件就够了，有点用宰牛刀的感觉，而且右侧还不能自定义，看悟空CRM的源码看的
转载
2024-02-12 21:58:09
490阅读
一、方法一描述：列表懒加载+节流 效果图： 实现： 组件：LazyLoading<template>
<div class="lazy-list">
<slot></slot>
</div>
</template>
<script>
export default {
name: "LazyLoa
转载
2024-04-22 23:49:40
950阅读
