el-table的那些特殊用法

谁借莪１个温暖的怀抱￠ 2024-04-17 05:38 30阅读 0赞

聊聊目前比较流行的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方法，对多个下拉选择项进行区分，筛选不通数据。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzaWFfWmhhbmdRUQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzaWFfWmhhbmdRUQ_size_16_color_FFFFFF_t_70 1][]

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非响应式。所以不要在模版和计算属性中使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzaWFfWmhhbmdRUQ_size_16_color_FFFFFF_t_70 2][]

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循环，成功实现行多级表头动态列报表。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzaWFfWmhhbmdRUQ_size_16_color_FFFFFF_t_70 3][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzaWFfWmhhbmdRUQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/6a80bf654228415cb74a1f8664bfc4ad.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzaWFfWmhhbmdRUQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/5c6b12298e7948ccad7609c39444722e.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzaWFfWmhhbmdRUQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/4adfcaf6c4ca482cb0c5c26318f305b0.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FzaWFfWmhhbmdRUQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/e5fdd4c2243349b6a3d3d7e6ce91a1e3.jpeg