vue基础之ElementUI表格详解

ElementUI 表格

前置工作: 安装好vue和elemetUI。如果是按需引入,请确保TableTableColumn模块已经引入

示例:一个基本的表格



vue基础之ElementUI表格详解_第1张图片

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进行遍历,看如下案例


    
    
    
      
      
        
      
        
        
        
        
        
        
        
        
      
    
  

效果如下

vue基础之ElementUI表格详解_第2张图片

获取表格,重点说下!!!

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



// ...

单选

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


    
    
    


多选

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



使用js选中


排序

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

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


筛选

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



vue基础之ElementUI表格详解_第3张图片

自定义列

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



展开行

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

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



 总结

本篇文章就到这里了,希望能给您带来帮助,也希望您能够多多关注脚本之家的更多内容!

你可能感兴趣的:(vue基础之ElementUI表格详解)