Table 表格

您所在的位置：网站首页 › 表格工具中行高和列宽 › Table 表格

Table 表格

2024-06-01 21:53| 来源: 网络整理| 查看: 265

Table 表格 #

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

TIP

在 SSR 场景下，您需要将组件包裹在之中 (如: Nuxt) 和 SSG (e.g: VitePress).

基础表格 #

基础的表格展示用法。

带斑马纹表格 #

使用带斑马纹的表格，可以更容易区分出不同行的数据。

带边框表格 #带状态表格 #

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

固定表头 #

纵向内容过多时，可选择固定表头。

固定列 #

横向内容过多时，可选择固定列。

固定列和表头 #

当您有大量数据块放入表中，您可以同时固定表头和列。

流体高度 #

当数据量动态变化时，可以为 Table 设置一个最大高度。

多级表头 #

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

固定表头 #

支持固定群组头

单选 #

选择单行数据时使用色块表示。

多选 #

你也可以选择多行。

排序 #

对表格进行排序，可快速查找或对比数据。

筛选 #

对表格进行筛选，可快速查找到自己想看的数据。

自定义列模板 #

自定义列的显示内容，可组合其他组件使用。

自定义表头 #

表头支持自定义。

展开行 #

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

树形数据与懒加载 #表尾合计行 #

若表格展示的是各类数字，可以在表尾显示各列的合计。

合并行或列 #

多行或多列共用一个数据时，可以合并行或列。

自定义索引 #

自定义 type=index 列的行号。

表格布局 #

通过属性 table-layout 可以指定表格中单元格、行和列的布局方式

Table API #Table 属性 #属性名说明类型Defaultdata表数据object[]heighttable 的高度。默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。string / number—max-heighttable 的最大高度。合法的值为数字或者单位为 px 的高度。string / number—stripe是否为斑马纹 tablebooleanfalseborder是否带有纵向边框booleanfalsesizeTable 的尺寸enum—fit列的宽度是否自撑开booleantrueshow-header是否显示表头booleantruehighlight-current-row是否要高亮当前行booleanfalsecurrent-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。function / string—empty-text空数据时显示的文本内容，也可以通过 #empty 设置stringNo Datadefault-expand-all是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效booleanfalseexpand-row-keys可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。object—default-sort默认的排序列的 prop 和顺序。它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序objectif prop is set, and order is not set, then order is default to ascendingtooltip-effect溢出的 tooltip 的 effectenumdarktooltip-options 2.2.28溢出 tooltip 的选项，参见下述 tooltip 组件objectobjectshow-summary是否在表尾显示合计行booleanfalsesum-text显示摘要行第一列的文本stringSumsummary-method自定义的合计计算方法Function—span-method合并行或列的计算方法Function—select-on-indeterminate在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行booleantrueindent展示树形数据时，树节点的缩进number16lazy是否懒加载子节点数据booleanfalseload加载子节点数据的函数，lazy 为 true 时生效Function—tree-props渲染嵌套数据的配置选项objectobjecttable-layout设置表格单元、行和列的布局方式enumfixedscrollbar-always-on总是显示滚动条booleanfalseshow-overflow-tooltip是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示，详请参考tooltip-optionsboolean / object 2.3.7—flexible 2.2.1确保主轴的最小尺寸，以便不超过内容booleanfalseTable 事件 #事件名说明类型select当用户手动勾选数据行的 Checkbox 时触发的事件Functionselect-all当用户手动勾选全选 Checkbox 时触发的事件Functionselection-change当选择项发生变化时会触发该事件Functioncell-mouse-enter当单元格 hover 进入时会触发该事件Functioncell-mouse-leave当单元格 hover 退出时会触发该事件Functioncell-click当某个单元格被点击时会触发该事件Functioncell-dblclick当某个单元格被双击击时会触发该事件Functioncell-contextmenu当某个单元格被鼠标右键点击时会触发该事件Functionrow-click当某一行被点击时会触发该事件Functionrow-contextmenu当某一行被鼠标右键点击时会触发该事件Functionrow-dblclick当某一行被双击时会触发该事件Functionheader-click当某一列的表头被点击时会触发该事件Functionheader-contextmenu当某一列的表头被鼠标右键点击时触发该事件Functionsort-change当表格的排序条件发生变化的时候会触发该事件Functionfilter-changecolumn 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件Functioncurrent-change当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性Functionheader-dragend当拖动表头改变了列的宽度的时候会触发该事件Functionexpand-change当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）FunctionTable 插槽 #插槽名说明子标签default自定义默认内容Table-columnappend插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。—empty当数据为空时自定义的内容—Table Exposes #方法名说明TypeclearSelection用于多选表格，清空用户的选择FunctiongetSelectionRows返回当前选中的行FunctiontoggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置这一行选中与否FunctiontoggleAllSelection用于多选表格，切换全选和全不选FunctiontoggleRowExpansion用于可扩展的表格或树表格，如果某行被扩展，则切换。使用第二个参数，您可以直接设置该行应该被扩展或折叠。FunctionsetCurrentRow用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。FunctionclearSort用于清空排序条件，数据会恢复成未排序的状态FunctionclearFilter传入由columnKey 组成的数组以清除指定列的过滤条件。如果没有参数，清除所有过滤器FunctiondoLayout对 Table 进行重新布局。当表格可见性变化时，您可能需要调用此方法以获得正确的布局Functionsort手动排序表格。参数 prop 属性指定排序列，order 指定排序顺序。FunctionscrollTo滚动到一组特定坐标FunctionsetScrollTop设置垂直滚动位置FunctionsetScrollLeft设置水平滚动位置FunctionTable-column API #Table-column 属性 #属性名说明Type默认值type对应列的类型。如果设置了selection则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮enumdefaultindex如果设置了 type=index，可以通过传递 index 属性来自定义索引number / Function—label显示的标题string—column-keycolumn 的 key， column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件string—prop字段名称对应列内容的字段名，也可以使用 property属性string—width对应列的宽度string / number''min-width对应列的最小宽度，对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列string / number''fixed列是否固定在左侧或者右侧。 true 表示固定在左侧enum / booleanfalserender-header列标题 Label 区域渲染使用的 FunctionFunction—sortable对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件boolean / stringfalsesort-method指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。应该如同 Array.sort 那样返回一个 NumberFunction—sort-by指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推Function / string / object—sort-orders数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序object['ascending', 'descending', null]resizable对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）booleantrueformatter用来格式化内容function—show-overflow-tooltip当内容过长被隐藏时显示 tooltipboolean / object 2.2.28undefinedalign对齐方式enumleftheader-align表头对齐方式，若不设置该项，则使用表格的对齐方式enumleftclass-name列的 classNamestring—label-class-name当前列标题的自定义类名string—selectable仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选Function—reserve-selection数据刷新后是否保留选项，仅对 type=selection 的列有效，请注意，需指定 row-key 来让这个功能生效。booleanfalsefilters数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。数组中的每个元素都需要有 text 和 value 属性。object—filter-placement过滤弹出框的定位enum—filter-class-name 2.5.0过滤弹出框的 classNamestring—filter-multiple数据过滤的选项是否多选booleantruefilter-method数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。function—filtered-value选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。object—Table-column 插槽 #插槽名说明类型default自定义列的内容objectheader自定义表头的内容，objectType Declarations #显示类型声明interface Sort { prop: string order: 'ascending' | 'descending' init?: any silent?: any } interface TreeNode { expanded?: boolean loading?: boolean noLazyChildren?: boolean indent?: number level?: number display?: boolean } 常见问题解答（FAQ） #如何在表格中使用图像预览？ #

注：由于固定列是通过 sticky 来实现的，如果表格中含有固定列，请在图像上添加 preview-teleported 属性。

当使用 DOM 模板时，为什么列没有渲染？ #

典型问题： #5046 #5862 #6919

这是因为 HTML 定义只允许一些特定元素省略关闭标签，最常见的是和。对于任意其他元素，如果你省略了关闭标签，原生的 HTML 解析器会认为你从未关闭打开的标签。

详情请参阅 Vue 文档。

源代码 #

组件 • 文档

贡献者 #