vue基础：ElementUI表格

表格是个非常常用的组件，本文将介绍表格的基本属性和使用，如果不足之处，请指出。觉得不错可以帮我点赞

ElementUI 表格

前置工作： 安装好vue和elemetUI。如果是按需引入，请确保Table、TableColumn模块已经引入

示例：一个基本的表格

el-table的属性

属性	属性值	说明
stripe	bool	是否使用斑马纹
border	bool	是否使用边框
height	数值	固定表头。只要设置了属性，就会自动固定表头
max-height	数值	位表格设置最大高度

el-table-column的属性

属性	属性值	说明
fixed	true(默认;左)|left|right	固定栏，滚动的时候会浮动起来，可以选择浮在哪一边

带状态表格

如果我们希望通过行内的一些属性来对行做不同的显示，那么我们可以给el-table添加row-class-name属性。

row-class-name属性值是一个回调函数

// ...

多级表头

通过嵌套实现多级表头，数据更具prop进行遍历，看如下案例

效果如下

获取表格，重点说下！！！

js中如何获取表格？，通过给添加ref属性为表格做唯一标识

// ...

单选

只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号

多选

手动添加一个属性，添加type="selection",会调价一行多选按钮

使用js选中

排序

在表格中定义default-sort定义默认排序列和排序规则

通过给列添加srtotable属性赋予列排序功能

筛选

在列中定义:filters属性，值为一个[{ text: '', value: '' }] 的选项数组，提供给用户筛选。同时，指定处理的回调函数:filter-method,值为函数名。有三个参数，选中的值、遍历时候的行、遍历时候的列

自定义列

一般我们会添加一个操作列，如删除和编辑。那么我们可以不指定prop属性，然后为列添加其他内容如下案例。同时，我们可以通过列上定义slot-scope="scope"，通过scope来获取列和行。一下直接使用官网案例

展开行

知识多又杂，一点点积累着，因为需求也是五花八门，用得上的。

在列(el-column)中添加属性 type="expand"就可设置为展开行，展开的内容定义在列标签内。属性的获取同样是通过slot-scope="scope"详情如下案例：