表格
基础用法
序号和选择
多级表头
插槽
头部操作栏
显示操作栏
分页
不显示头部操作栏
属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
header | 是否显示头部的操作栏 | enmu | 一 |
footer | 是否显示底部分页栏 | Boolean | true |
tableSlot | 表格的插槽为true时,表格中所有的插槽名称都为default,为false时可以正常使用插槽 | Boolean | false |
table | 详细请参阅下面table属性 | Object | 一 |
Table 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
tableColumns | 表格头的数据配置项 | Array | 一 |
errData | 表格中无数据时显示的数据 | String | - |
setting | 是否显示表格右上的操作栏 | Boolean | true |
class | 表格的类名 | String | 一 |
pagination | 详细请参阅element-plus的pagination | Object | object |
...... | 更多配置,请参考 |
TableColumns 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 当前列是否显示 | enmu | 一 |
checked | 当前列是否是选中状态和右上角的操作栏有联动效果,选中时显示,反之不显示 | Boolean | true |
setting | 操作栏是否显示在当前列,当值为true时表格右上的操作栏会消失 | Boolean | 一 |
maxOperations | 表格最大显示的操作按钮数,超出这个数显示更多,设置operations有效 | Number | 3 |
operations | 表格操作按钮列表,详情请参阅下表 | Object | 一 |
sort | 列的排序,数值越小列越靠前 | Number | 一 |
children | 表格头下的数据配置项,多级表头 | Array | 一 |
...... | 更多配置,请参考 | 一 | 一 |
Operations 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 名称 | String | 一 |
click | 点击事件 | Function | 一 |
show | 是否显示 | enmu | |
sort | 操作的排序,数值越小列越靠前 前 | Number | 一 |
second | 二次确认框,点确定后才会调用click方法,当operations的key为delete时默认开启,当值为messageBox时是弹窗的确认状态,在操作为更多时下的按钮都为弹窗确认状态 | enmu | 一 |
messageBox | 当second为messageBox时生效,messageBox的配置项 | Object | 一 |
...... | 更多配置,请参考 | 一 | 一 |
事件
事件名 | 说明 | 类型 |
---|---|---|
size-change | page-size 改变时触发 | Function |
current-change | current-page 改变时触发 | Function |
checked-change | 点击隐藏显示操作栏时触发 | Function |
插槽
插槽名 | 说明 |
---|---|
column_[prop] | column_是固定的,prop里面的值取决于tableColumns中的prop,自定义表格中的内容 |
column_header_[prop] | column_header_是固定的,prop里面的值取决于tableColumns中的prop,自定义表格头部的内容 |
header_left_[key] | column_header_是固定的,prop里面的值取决于header中的key,自定义表格头部操作栏的左侧 |
header-footer | 自定义表格头部操作栏的底部 |
header-title | 自定义表格头部操作栏的头部 |
table-empty | 自定义表格空的内容 |
table-append | 插入至表格最后一行之后的内容 |
Header 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 名称 | String | 一 |
click | 点击事件 | Function | 一 |
show | 是否显示 | enmu | |
sort | 操作的排序,数值越小按钮越靠前 | Number | 一 |
...... | 更多配置,请参考 | 一 | 一 |