TABLE文档

variables

组件配置属性，详情见下面Option属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | data | 显示数据 | Array | - | - | | option | 组件配置属性，详情见下面Option属性 | Object | - | - |

Option Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | column | 显示列表组，详情见下面Column属性 | Array | - | - | | propEmptyDefault | 列表没有值时，默认显示的值 | String | - | - | | isLoading | 是否正在加载中 | Boolean | true/false | false | | isMenu | 是否显示操作列 | Boolean | true/false | true | | isPagination | 是否显示分页 | Boolean | true/false | false | | paginationCurrent | 当前页码 | Number | - | - | | paginationSize | 每一页加载多少条数据 | Number | - | - | | paginationTotal | 总页数 | Number | - | - | | paginationPageSizes | 分页信息 | Array | - | [10, 20, 30, 40] | | menuLabel | 操作列的标题 | String | - | 操作 | | menuWidth | 操作列的宽度 | String | - | 操作 | | menuAlign | 操作列的对齐方式 | String | left/center/right | right | | menuFixed | 操作列是否固定在左侧或者右侧，true 表示固定在左侧 | String/Boolean | left/true/right | - | | isMenuEdit | 是否显示编辑按钮 | Boolean | true/false | true | | menuEditTitle | 显示编辑按钮的文本 | String | - | 编辑 | | isMenuDelete | 是否显示删除按钮 | Boolean | true/false | true | | menuDeleteTitle | 显示删除按钮的文本 | String | - | 删除 | | menuEditOption | 编辑按钮类型时的按钮属性,详情查看一下的menuEditOption/menuDeleteOption Attributes | Object | - | - | | menuDeleteOption | 删除按钮类型时的按钮属性,详情查看一下的menuEditOption/menuDeleteOption Attributes | Object | - | - | | emptyText | 数据为空时文案,也可以设置slot->empty | String | - | 暂无数据 | | isIndex | 是否显示序列号 | Boolean | true/false | false | | indexLabel | 序列号头部标题 | String | - | # | | indexMethod | 序列号自定义索引，例如：indexMethod(index) {return index * 2;} | number, Function(index) | - | - | | indexWidth | 序列号列的宽度 | String | - | 50 | | indexFixed | 序列号列的宽度 | String/Boolean | left/true/right | - | | indexAlign | 序列号列的宽度 | String | left/center/right | - | | isExpand | 是否可展开模式 | Boolean | true/false | false | | expandLabel | 展开模式头部标题 | String | - | - | | expandWidth | 展开模式列的宽度 | String | - | 50 | | expandFixed | 展开模式列是否固定在左侧或者右侧，true 表示固定在左侧 | String/Boolean | left/true/right | - | | expandAlign | 展开模式的对齐方式 | String | left/center/right | - | | slotExpand | 展开模式的插槽，返回的数据：data当前列数据，index列索引 | - | - | - | | isSelection | 是否可多选模式 | Boolean | true/false | false | | selectionLabel | 多选模式头部标题 | String | - | - | | selectionWidth | 多选模式列的宽度 | String | - | 50 | | selectionFixed | 多选模式列是否固定在左侧或者右侧，true 表示固定在左侧 | String/Boolean | left/true/right | - | | selectionAlign | 多选模式的对齐方式 | String | left/center/right | - | | height | Table 的高度，默认为自动高度。 | String/Number | - | - | | maxHeight | Table 的最大高度，例如：50、150px | String/Number | - | - | | border | 是否带有纵向边框 | Boolean | true/false | false | | style | Table 的尺寸 | String | medium / small / mini | - | | showHeader | 是否显示表头 | Boolean | true/false | false | | highlightCurrentRow | 是否要高亮当前行 | Boolean | true/false | false | | currentRowKey | 当前行的 key | String,Number | - | - |

Column Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | slotHeader | 当前列插槽头部自定义插槽 | String | - | - | | slotName | 当前列插槽，返回的数据：data当前列数据，index列索引 | String | - | - | | label | 标题 | String | - | - | | colType | 对应列的类型，同element-ui type | String | selection/index/expand | - | | indexMethod | 只有在colType =index有效，序列号自定义索引，例如：indexMethod(index) {return index * 2;} | number, Function(index) | - | - | | columnKey | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | String | - | - | | width | 列的宽度 | String | - | - | | minWidth | 列的最小宽度 | String | - | - | | fixed | 操作列是否固定在左侧或者右侧，true 表示固定在左侧 | String/Boolean | left/true/right | - | | renderHeader | 列标题 Label 区域渲染使用的 Function | Function | - | - | | sortable | 对应列是否可以排序 | Boolean | true/false | false | | sortMethod | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function | - | - | | sortBy | 指定数据按照哪个属性进行排序 | String/Array/Function(row, index) | - | - | | sortOrders | 数据在排序时所使用排序策略的轮转顺序，参考element-ui sort-orders | - | - | - | | resizable | 对应列是否可以通过拖动改变宽度，参考element-ui resizable | - | - | - | | formatter | 用来格式化内容 | - | - | - | | showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | Boolean | true/false | false | | align | 列的对齐方式 | String | left/center/right | - | | className | class 名称 | String | - | - |

Events

| 事件名 | 说明 | | ---- | ---- | | handleEdit | 点击编辑按钮，返回值，scope | | handleDelete | 点击删除按钮，返回值，scope | | paginationChance | 在isPagination=true时，页码改变回调事件 | | selectionChange | 当选择项发生变化时会触发该事件 | | $emit | 当用户手动勾选数据行的 Checkbox 时触发的事件 | | selectAll | 当用户手动勾选全选 Checkbox 时触发的事件 | | sortChange | 当表格的排序条件发生变化的时候会触发该事件 | | rowClick | 当某一行被点击时会触发该事件 | | rowDblclick | 当某个单元格被双击击时会触发该事件 | | cellMouseEnter | 当单元格 hover 进入时会触发该事件 | | cellMouseLeave | 当单元格 hover 退出时会触发该事件 | | cellClick | 当某个单元格被点击时会触发该事件 | | cellDblclick | 当某个单元格被双击击时会触发该事件 | | currentRowChange | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | | expandChange | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）| | rowContextmenu | 当某一行被鼠标右键点击时会触发该事件 | | headerClick | 当某一列的表头被点击时会触发该事件 | | headerDragend | 当拖动表头改变了列的宽度的时候会触发该事件 |

Methods

| 方法名 | 说明 | 说明 | | ---- | ---- | ---- | | clearSelection | 用于多选表格，清空用户的选择 | - | | toggleAllSelection | 用于多选表格，切换所有行的选中状态 | - | | clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | - | | doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | - | | toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected | | toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, selected | | setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row | | clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey | | sort | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | prop: string, order: string |

Slot 插槽

| 事件名 | 说明 | | ---- | ---- | | menu | 右边操作栏插槽 | | menuHeader | 右边操作栏头部自定义 | | slotPagination | 分页左边的插槽，只有在isPagination = true时有效 |

编辑列按钮类型时的按钮属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | size | 按钮尺寸String | medium / small / mini | mini | | type | 按钮类型，删除按钮默认为danger | String | primary / success / warning / danger / info / text | - | | plain | 是否朴素按钮 | Boolean | true/false | false | | round | 是否圆角按钮 | Boolean | true/false | false | | circle | 是否圆形按钮 | Boolean | true/false | false | | loading | 是否加载中状态 | Boolean | true/false | false | | icon | 图标类名 | String | - | - | | style | 按钮style | String | - | - |