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的形式显示出来。如下图展示：

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

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

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