但需求咱还是要做的,然后咱就去找了
基于vue的虚拟表格
umyui
,讲真,还挺好用。
具体的安装步骤
官方文档
有写,咱就不说了啊。主要是说一说里面好用的几个点。
介绍中的
用前须知
这个需要仔细看一下
0.下面文字中描述得element,ele, el-table关键字,如果你不知道这是啥,也没事,你可以是个小白新手,直接看文档即可上手!
1. 表格解决卡顿问题,那么虚拟表格原理呢大概就是: 减少对DOM节点的渲染,通过滚动函数节流实现滚动后事件来动态渲染数据
2. 基础表格其实就是element的表格的升级版,修改了ele的表格bug(如果你想使用个普通表格你无需安装其他库,就使用这个表格即可),你可以发现基础表格里面的示例没有配置:use-virtual 这个属性。
3 基础表格没有使用use-virtual属性,代表表格数据不多,只想要一个普通的表格。如果你表格卡。请你关注下虚拟表格部分。
4. 使用u-table 开启use-virtual虚拟可以支持微小的合并行|列 如2列 2行,支持多级头, 超过2行2列可能布局错乱,因为虚拟滚动的原理导致某些节点并未渲染。
4.5: 使用u-table 开启use-virtual不支持开展行,如果需要展开行,你是要虚拟表格部分的ux展开行!
5. u-table不支持展开行,需要展开行使用ux-grid
6. ux-grid解决列多 行多导致卡的情况, u-table解决行多的情况,不解决列多的情况(如你的列超过70+,你可能就需要使用ux-grid了,因为此时你需要把列也虚拟)
7. 重点:虚拟表格集成了基础表格的东西(如属性/方法/事件)!
8. 虚拟表格在本文档中呢, 意思就是解决了数据量多导致卡顿的情况! 基础表格在文档中呢,意思就是升级版的el-table(但是没解决数据多卡的情况)!
9. 编辑型表格呢,是解决那种表格单元带有输入框或者选择时间等等的情况,而导致卡顿的场景!意思就是表格单元格具有一定的操作,单元格有自定义组件或者UI库组件等等
10. 有了表格,怎么导出表格数据为excel并且带样式呢?,[请点击](https://github.com/livelyPeng/pl-export-excel)
1,基础表格
这个跟element ui里的表格比较相似,很多element ui的api属性啥的都可以在这用。所以不用的担心element ui的api和属性没办法用的问题
2,虚拟表格
虚拟表格这一块就是当数据量比较大的时候只会渲染当前的可视窗口的数据。建议开启使用:show-body-overflow 和 show-header-overflow 。具体的用法可以看文档中的介绍,里面介绍的很详细,element ui的表格中的属性和API同样适用。
3,编辑表格
编辑表格就比较有趣了。在数据量比较大的时候如果进行编辑以前的方法是进行dom操作,数据操作,就会比较麻烦。
现在用了这个编辑表格就不会有那么多麻烦了,相当于这个组件将需要编辑的dom进行了操作,只要用组件的updateStatus方法就可以将当前数据更新。但是用这个的前提是以下几点需要满足:(这几点文档中都有详细的介绍)
1.首先在ux-grid上绑定 keep-source属性,edit-config = {trigger: 'click',// 点击触发, mode: 'row' // 作用点在谁身上 row表示行,cell: 表示单元格} (这个比较重要)
2.然后再列上需要定义edit-render属性表示是可以编辑的列,,添加了呢,然后头部header会出现有编辑图形的icon啦,代表是可以编辑的行 (这个比较重要)
3.设置 keep-source 开启保持原始值状态,对于某些需要局部保存的场景,可以在数据保存完成后调用 reloadRow 方法加载行数据并恢复到初始状态
4.可以支持大量的列
5.最后呢,你需要在列上自定义编辑时的渲染模板,v-slot:edit代表是自定义编辑时显示的视图, v-slot:header是自定义头部啦
其中edit-config的属性值
同时虚拟表格除了可以进行编辑表格中的数据,也可以进行校验表格中的数据。需要满足以下的属性:(文档中也有很详细的描写)
1. updateStatus方法非常重要
2. validate方法 如果你传入一个row,或者rows rows就是多个row的意思, 那么就代表指定某行校验!
具体的可以看文档中的例子,写的还是比较详细的。
因为最近用到这些了,所以要记录总结一下。其中也遇到很多问题,下次再把问题总结一下。
共勉~