Vue/ElementUi--表格组件二次封装（补充）

关于表格组件其它的事件与方法,关于小伙伴的回复

• 其实在上篇中，该有的都有了，方法与事件的添加使用都是大同小异，在一个项目中是不可能全部用到的。
• 上篇中的内容应该阔以解决 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> 标签里面，属性动态绑定或者直接加上 : 属性 = “ 属性名 ”，事件或者方法 @ 事件方法 = “ 事件方法名 ”
  表格.png

3. Table-column Attributes（表列属性）的使用

• 需要传值同样在 props 中添加
• 使用一般加在<el-table-column></el-table-column>标签中，动态绑定即可
  列表.png

4. 本地排序

• 添加

  
  属性添加.png

组件中使用.png

• 效果

  
  本地排序.gif

5. 筛选

• 组件中添加 filters 与 filter-method，动态绑定
  

  添加.png

• 组件props 中加入 filterMethod
  

  添加方法.png

• 模块中使用（直接上图，就少写字描述了，步骤就是图片描述）

  
  第一步：组件中绑定.png
  第二步：methods中写方法.png

第三步：数据绑定.png 异步数据赋值.png

• 效果

  
  筛选.gif

6. 表格字体变色

• 组件中添加，这个也比较简单，直接上图

  
  第一步：添加绑定.png

第二步：props中添加.png

• 模块中使用

  
  绑定.png

判断与返回结果.png 判读.png

• 效果，只要判断条件不同，返回的颜色自然不同，只要有需求还可以搞成七彩的 ๑乛◡乛๑。
  效果.png

7. 结束

• 方法太多了，个人也不是很想把他们全部集成到一起，不是不能是不想，根据每个项目需求来添加更加的灵活。
• 当然目前这些都是比较简单的东西，关于复杂表头啊，跨分页过滤啊等等吧，挺复杂的，我也还要再学习一下的。
• 最近事也比较多，闹心的居多，所以整理基本都是截图图，详细的描述较少，有时间再补了。

点个赞呗！