js怎么获取vue ElementUI表格
今天小编给大家分享一下js怎么获取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",会调价一行多选按钮
{{ scope.row.date }}
使用js选中
排序
在表格中定义default-sort定义默认排序列和排序规则
通过给列添加srtotable属性赋予列排序功能
筛选
在列中定义:filters属性，值为一个[{ text: '', value: '' }] 的选项数组，提供给用户筛选。同时，指定处理的回调函数:filter-method,值为函数名。有三个参数，选中的值、遍历时候的行、遍历时候的列
自定义列
一般我们会添加一个操作列，如删除和编辑。那么我们可以不指定prop属性，然后为列添加其他内容如下案例。同时，我们可以通过列上定义slot-scope="scope"，通过scope来获取列和行。一下直接使用官网案例
{{ scope.row.date }} 姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }} 编辑 删除
展开行
知识多又杂，一点点积累着，因为需求也是五花八门，用得上的。
在列(el-column)中添加属性 type="expand"就可设置为展开行，展开的内容定义在列标签内。属性的获取同样是通过slot-scope="scope"详情如下案例：
名称：{{scope.row.name }}
地址：{{scope.row.address }}
以上就是"js怎么获取vue ElementUI表格"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。
