Table 表格

说明

基于 el-table + el-pagination 封装，重置了表格部门默认属性和样式，内置了表格和分页组件

用法示例

基础用法

共 0项数据

• 1

Go to

<template>
  <y-table :data="tableData" @paginationChange="paginationChange" @select="onSelect">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="Date" />
    <el-table-column prop="name" label="Name" />
    <el-table-column width="100px" prop="address" label="Address" :tooltip-formatter="tooltipFormatter"
      show-overflow-tooltip />
  </y-table>
</template>

<script lang="ts" setup>
import { toRaw } from 'vue'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const tooltipFormatter = (row: any) => {
  return "123"
}

const paginationChange = (obj: { currentPage: number, pageSize: number }) => {
  console.log(obj);
}

const onSelect = (selection: any, row: any) => {
  console.log(toRaw(selection), toRaw(row));
}
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
loading	是否显示加载状态	boolean	false
empty-props	空数据是占位 y-empty 组件配置	object	—
show-footer	是否显示底部分页区域	boolean	true
pagination-props	分页配置	object	{layout: 'prev, pager, next, sizes, jumper',background: true,pageSizes: [10, 20, 30, 40, 50, 100, 200],total: 0}
form-table-prop	在表单对象中嵌套的 table 数据的键名，用于绑定校验	string	tableData
data	表数据	array	[]
height	table 的高度；默认为自动高度；如果 height 为 number 类型，单位为 px；如果 height 为 string 类型，则会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式	string / number	—
max-height	table 的最大高度；合法的值为数字或者单位为 px 的高度	string / number	—
stripe	是否为斑马纹	boolean	false
fit	列的宽度是否自动撑开	boolean	true
show-header	是否显示表头	boolean	true
highlight-current-row	是否要高亮当前行	boolean	false
current-row-key	当前行的 key，只写属性	string / number	—
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className	Function / string	—
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style	Function / object	—
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className	Function / string	—
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style	Function / object	—
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className	Function / string	—
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style	Function / object	—
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className	Function / string	—
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style	Function / object	—
row-key	行数据的 Key，优化 Table 的渲染；在使用reserve-selection或显示树形数据时，该属性必填。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用函数	function / string	—
empty-text	空数据时显示的文本内容， 也可以通过 #empty 设置	string	'暂无数据'
default-expand-all	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	boolean	false
expand-row-keys	设置 Table 当前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组	array	—
default-sort	默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序	object	如果设置了prop，但没有设置 order，那么 order将被默认设置为ascending
tooltip-effect	溢出的 tooltip 的 effect	enum	'dark'
tooltip-options	溢出 tooltip 的选项， 同el-tooltip	object	object
append-filter-panel-to	挂载到哪个 DOM 元素	string	—
show-summary	是否在表尾显示合计行	boolean	false
sum-text	显示摘要行第一列的文本	string	'总计'
summary-method	自定义的合计计算方法	Function	—
span-method	合并行或列的计算方法	Function	—
select-on-indeterminate	在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行	boolean	true
indent	展示树形数据时，树节点的缩进	number	16
lazy	是否懒加载子节点数据	boolean	false
load	加载子节点数据的函数，lazy 为 true 时生效	Function	—
tree-props	渲染嵌套数据的配置选项	object	object
table-layout	设置表格单元、行和列的布局方式	enum	'fixed'
scrollbar-always-on	总是显示滚动条	boolean	false
show-overflow-tooltip	是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示，参见el-tooltip	boolean / object	—
flexible	确保主轴的最小尺寸，以便不超过内容	boolean	false
scrollbar-tabindex	body 的滚动条的包裹容器 tabindex	string / number	—
allow-drag-last-column	是否允许拖动最后一列	boolean	true
tooltip-formatter	自定义 show-overflow-tooltip=true 时的 tooltip 内容	Function	—
preserve-expanded-content	在折叠后是否在DOM中保留展开行内容	boolean	false
native-scrollbar	是否使用原生滚动条样式	boolean	false

Slots

名称	说明	参数
default	默认内容	—
empty	空状态内容	—
footer	底部分页区域内容	—
append	插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上	—

Events

事件名	说明	类型
pagination-change	分页变化时触发	function
select	手动勾选数据行的 Checkbox 时触发的事件	Function
select-all	手动勾选全选 Checkbox 时触发的事件	Function
selection-change	当选择项发生变化时会触发该事件	Function
cell-mouse-enter	当单元格 hover 进入时会触发该事件	Function
cell-mouse-leave	当单元格 hover 退出时会触发该事件	Function
cell-click	当某个单元格被点击时会触发该事件	Function
cell-dblclick	当某个单元格被双击击时会触发该事件	Function
cell-contextmenu	当某个单元格被鼠标右键点击时会触发该事件	Function
row-click	当某一行被点击时会触发该事件	Function
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	Function
row-dblclick	当某一行被双击时会触发该事件	Function
header-click	当某一列的表头被点击时会触发该事件	Function
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	Function
sort-change	当表格的排序条件发生变化的时候会触发该事件	Function
filter-change	当表格的过滤条件发生变化的时候会触发该事件	Function
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	Function
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	Function
expand-change	当对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）	Function
scroll ^(2.9.0)	表格滚动后触发	Function

Exposes

名称	说明	类型
clearSelection	用于多选表格，清空用户的选择 selection	Function
getSelectionRows	返回当前选中的行 rows	Function
toggleRowSelection	用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否	Function
toggleAllSelection	用于多选表格，切换全选和全不选all	Function
toggleRowExpansion	用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠	Function
setCurrentRow	用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态	Function
clearSort	用于清空排序条件，数据会恢复成未排序的状态 order	Function
clearFilter	传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器	Function
doLayout	对 Table 进行重新布局。 当表格可见性变化时，您可能需要调用此方法以获得正确的布局	Function
sort	手动排序表格。 参数 prop 属性指定排序列，order 指定排序顺序	Function
scrollTo	滚动到一组特定坐标 coordinates	Function
setScrollTop	设置垂直滚动位置	Function
setScrollLeft	设置水平滚动位置	Function
columns	获取表列的 context	array
updateKeyChildren	适用于 lazy Table, 需要设置 rowKey, 更新 key children	Function