关于表格组件其它的事件与方法,关于小伙伴的回复
- 其实在上篇中,该有的都有了,方法与事件的添加使用都是大同小异,在一个项目中是不可能全部用到的。
- 上篇中的内容应该阔以解决
68.66375%
的需求,我的本意是保持一定的扩展性,在不同的项目中添加不同的需求,纯全通用的话,太臃肿了一些。- 本篇主要解决内容:
1.个别方法添加使用
2.字体颜色判断
3.临时补充,想到什么补什么
0. 其它
上篇链接:Vue/ElementUi--表格组件二次封装
链接:小伙伴封装的表格表单图表
1. 再看官方文档
- table官方链接
- 官方文档还是挺详细的,但是很少有人能把每一个属性、每一个方法都记下来的,可能大多数小伙伴都跟我一样,有需要的时候才去文档中查找;
- 这次呢我也是真的认真的看了
81.0786%
,稍微整理了一下,都输错好几遍……肯定也不会每一个都搞一遍……
/ | 类型 | 数量 |
---|---|---|
Table Attributes | 表格属性 | 33 |
Table Events | 表格事件 | 17 |
Table Methods | 表格方法 | 9 |
Table Slot | 表格插槽 | 1 |
Table-column Attributes | 表列属性 | 27 |
Table-column Scoped Slot | 表列作用域插槽 | 2 |
- 想想这么多的属性事件方法全部做到一起,额,还是算了~
2. Table Attributes
(表格属性)、Table Events
(表格事件)、Table Methods
(表格方法)的使用
- 关于父子组件怎么传值就不说了,基于上篇组件,在 props 中添加即可
- 使用一般加在
<el-table></el-table>
标签里面,属性动态绑定或者直接加上: 属性 = “ 属性名 ”
,事件或者方法@ 事件方法 = “ 事件方法名 ”
3. Table-column Attributes
(表列属性)的使用
- 需要传值同样在
props
中添加 - 使用一般加在
<el-table-column></el-table-column>
标签中,动态绑定即可
4. 本地排序
-
添加
-
效果
5. 筛选
-
组件中添加
filters
与filter-method
,动态绑定
-
组件
props
中加入filterMethod
-
模块中使用(直接上图,就少写字描述了,步骤就是图片描述)
-
效果
6. 表格字体变色
-
组件中添加,这个也比较简单,直接上图
-
模块中使用
- 效果,只要判断条件不同,返回的颜色自然不同,只要有需求还可以搞成七彩的
๑乛◡乛๑
。
7. 结束
- 方法太多了,个人也不是很想把他们全部集成到一起,不是不能是不想,根据每个项目需求来添加更加的灵活。
- 当然目前这些都是比较简单的东西,关于复杂表头啊,跨分页过滤啊等等吧,挺复杂的,我也还要再学习一下的。
- 最近事也比较多,闹心的居多,所以整理基本都是截图图,详细的描述较少,有时间再补了。