el-table的那些特殊用法

聊聊目前比较流行的Vue前端的架构。目前因为Vue良好编码规范,学习上手周期短等优势。被我们很多大前端组所追捧,其中有的项目采用Element组件库占比达90%。主要用到el-input,el-select,el-datePicker,el-form,el-table,el-pagination等等组件。这里来聊聊el-table的那些特殊用法。

1.el-table filters 筛选问题

el-table 常用表格,配合filters 可以对表格数据筛选。但是日常开发你觉得这样就能满足产品大大的需求吗,too young。有时候分野筛选是对数据库所有数据筛选,不是筛选表格当前页。就涉及到选择筛选项,时时请求接口刷新表格页。所以这里利用filter-change方法,对多个下拉选择项进行区分,筛选不通数据。

el-table的那些特殊用法_第1张图片

el-table的那些特殊用法_第2张图片

2.el-table selection toggleRowSelection选中问题

el-table 的selection选择模式,selection-change很常用的选中回调。那如果有选中状态初始化呢?toggleRowSelection利用$refs引用组件实例选中改行,比document.getElementById方法,会减少获取dom节点的消耗。但是这依然不足矣适用。有人说在create()钩子函数进行DOM操作无异于徒劳,DOM还没有渲染,那么在mounted()钩子函数中,进行DOM操作都不会有问题。但是这里就有问题。选中状态接口mounted中执行后,并没有勾选状态。因为Vue的异步DOM更新会开启队列,缓存同一事件循环中所发生的数据变更。所以用到$nextTick监听DOM更新同步刷新状态。注:ref用来給元素或者自组件组册引用信息,注册时机是渲染结束创建,并且$ref非响应式。所以不要在模版和计算属性中使用

el-table的那些特殊用法_第3张图片

3.el-table el-table-column 多行,多列,列为多级表头

el-table的动态行el-table-column固定列是我们常用方式。那如果是动态行加动态列的多级表头如何做。动态行动态列一级表头一个list行包含list列数据v-for解决,但是动态行动态多级表头列v-for过程中list行里面的list列的属性就不可读。无外乎里面列的list的v-for循环不可读,所以采取抽取里面列的估计列title做v-for循环,成功实现行多级表头动态列报表。

el-table的那些特殊用法_第4张图片

大家有其他的骚操作也可以一起交流下

你可能感兴趣的:(el-table,filters,筛选问题,el-table,selection,toggleRowSe,多行,多列,element,大前端,前端Vue,前端Vue)