Element学习笔记之Table

Table表格

基础表格:prop属性对应data对象中的键名,label属性定义表格的列名,width属性定义列宽

stripe属性创建带斑马纹的表格,布尔类型;

border属性创建带变宽的表格,布尔类型;

row-class-name属性为table中的某一行添加class属性,表明该行处于某种状态【成功、信息、警告、危险】;

固定表头:纵向内容过多时。在<el-table>元素中定义height属性即可;

固定列:横向内容过多时。在<el-table-column>属性中定义fixed属性即可固定指定列;它接受布尔值或者left/right,表示左边固定还是右边固定。例如 fixed="right"

固定列和表头:横纵内容均过多时。同时设置height和fixed属性即可

流体高度:当数据量动态变化时,可以为table设置一个最大高度,max-height。此时若表格所需的高度大于设置的最大高度,则会显示一个滚动条。

多级表头:当数据结构比较复杂时,可使用多级表头来展现数据的层级关系。在<el-table-column>元素里嵌套<el-table-column>元素即可。

表格数据多选:手动添加一个<el-table-column>元素,设置type属性为selection即可。默认情况下某一列的内容过多会换行显示,若需要单行显示可以使用show-overflow-tooltip属性,布尔类型,为true则会以tooltip的形式显示出来。如下图展示:

Element学习笔记之Table

自定义列模板:自定义列的显示内容,可组合其他组件使用。使用slot-scope="scope"可以获取到row、cloumn、$index、store的数据;如下图:

Element学习笔记之Table

展开行:当行内容过多并且不想显示横向滚动条时,可以使用Table的展开行功能。设置<el-table-column>元素的属性type="expand"和Scoped slot。示例如下图:

Element学习笔记之Table

Element学习笔记之Table

还有一些Table相关的设置,具体请看官网http://element-cn.eleme.io/#/zh-CN/component/table