mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
36 lines
32 KiB
HTML
36 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Virtualized Table | Element Plus</title>
|
||
<meta name="description" content="a Vue 3 based component library for designers and developers">
|
||
<link rel="stylesheet" href="/assets/style.c5dec7e2.css">
|
||
<link rel="modulepreload" href="/assets/chunks/sticky-rows.42688b17.js">
|
||
<link rel="modulepreload" href="/assets/app.01b76562.js">
|
||
<link rel="modulepreload" href="/assets/en-US_component_table-v2.md.91694532.lean.js">
|
||
|
||
<link rel="icon" href="/images/element-plus-logo-small.svg" type="image/svg+xm">
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
|
||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
|
||
<link rel="manifest" href="/manifest.webmanifest">
|
||
<meta name="theme-color" content="#ffffff">
|
||
<meta name="msapplication-TileColor" content="#409eff">
|
||
<meta name="msapplication-config" content="/browserconfig.xml">
|
||
<link rel="stylesheet" href="//fonts.loli.net/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap">
|
||
<link rel="stylesheet" href="//unpkg.com/nprogress@0.2.0/nprogress.css">
|
||
<script>window.supportedLangs=["en-US","zh-CN"];</script>
|
||
<script>(()=>{const o=window.supportedLangs,a="preferred_lang",s="en-US",c={en:"en-US",fr:"fr-FR",es:"es-ES"};let t=localStorage.getItem(a)||navigator.language;const n=c[t]||(o.includes(t)?t:s);if(localStorage.setItem(a,n),t=n,!location.pathname.startsWith(`/${t}`)){const e=[`/${t}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=e.endsWith(".html")||e.endsWith("/")?e:e.concat("/")}})();</script>
|
||
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
|
||
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
|
||
<script>(function(t,s,n,h,j,e){t.hj=t.hj||function(){(t.hj.q=t.hj.q||[]).push(arguments)},t._hjSettings={hjid:2894908,hjsv:6},j=s.getElementsByTagName("head")[0],e=s.createElement("script"),e.async=1,e.src=n+t._hjSettings.hjid+h+t._hjSettings.hjsv,j.appendChild(e)})(window,document,"https://static.hotjar.com/c/hotjar-",".js?sv=");</script>
|
||
<meta name="twitter:title" content="Virtualized Table | Element Plus">
|
||
<meta property="og:title" content="Virtualized Table | Element Plus">
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="App"><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-59a355b5><div class="header-container" data-v-59a355b5><div class="logo-container" data-v-59a355b5><a href="/en-US/" data-v-59a355b5><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-59a355b5></a></div><div class="content" data-v-59a355b5><div id="docsearch" class="algolia-search-box search" data-v-59a355b5></div><nav class="navbar-menu menu" data-v-59a355b5><!--[--><a class="link-item link is-menu-link" href="/en-US/guide/design" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Guide<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/en-US/component/button" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Component<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/en-US/resource/index" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Resource<!--]--><!--]--><!----></a><!--]--></nav><!----><div class="translation-container translation" data-v-59a355b5 data-v-dd9c9540><!----></div><div class="social-links" data-v-59a355b5 data-v-76aa5200><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-76aa5200 data-v-6c8d2bba><i class="el-icon" style="font-size:24px;" data-v-6c8d2bba><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-6c8d2bba><path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></svg><!--]--></i></a><!--]--></div><div class="menu-hamburger hamburger" role="button" data-v-59a355b5><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></div></div></div></div><!----></header><div class="sub-nav py-3 flex items-center"><div class="sidebar-button flex items-center"><i class="el-icon mr-2" style="font-size:20px;"><!--[--><svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="7" width="11" height="2" fill="#606266"></rect><rect x="2" y="11" width="14" height="2" fill="#606266"></rect><rect x="2" y="15" width="8" height="2" fill="#606266"></rect><rect x="2" y="3" width="16" height="2" fill="#606266"></rect></svg><!--]--></i><span class="leading-6">Menu</span></div><button ref_key="_ref" class="el-button el-button--text el-button--small height-5 go-back-top" type="button" style=""><!--v-if--><span class=""><!--[-->Back to top<!--]--></span></button></div><aside class="sidebar"><!--[--><div class="sponsors" data-v-b631cc3c><p class="sponsors-title" data-v-b631cc3c>Sponsored by</p><div class="sponsor-container" data-v-b631cc3c data-v-2d33bf36><!--[--><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="JNPF - JNPF 低代码开发平台，让开发变得简单！" class="sponsor-item inline-flex" style="" target="_blank" data-v-2d33bf36><img src="/images/jnpfsoft.jpg" alt="JNPF" data-v-2d33bf36></a><a href="https://vform666.com/vform3.html?from=element_plus" title="VForm - Vue 3 可视化/低代码表单" class="sponsor-item inline-flex" style="" target="_blank" data-v-2d33bf36><img src="/images/vform-banner.png" alt="VForm" data-v-2d33bf36></a><a href="https://js.design?source=element-plus" title="即时设计 - 专业在线UI设计工具" class="sponsor-item inline-flex" style="" target="_blank" data-v-2d33bf36><img src="/images/js-design-banner.jpg" alt="JSDesign" data-v-2d33bf36></a><!--]--></div><div class="sponsor-container" data-v-b631cc3c data-v-55fdef4a><!--[--><a class="sponsor-item inline-flex items-center" href="https://bit.dev/?from=element-ui" title="bit - Share Code" target="_blank" data-v-55fdef4a><img src="/images/bit.svg" alt="bit" data-v-55fdef4a></a><a class="sponsor-item inline-flex items-center" href="https://www.renren.io/?from=element-ui" title="人人开源 - 企业级的快速开发平台" target="_blank" data-v-55fdef4a><img src="/images/renren.png" alt="renren.io" data-v-55fdef4a></a><a class="sponsor-item inline-flex items-center" href="https://form.making.link/?from=element_plus" title="FormMaking - Vue表单设计器，赋能企业快速开发" target="_blank" data-v-55fdef4a><img src="/images/formmaking.png" alt="FormMaking" data-v-55fdef4a></a><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-76c5459a><p class="link-text" data-v-76c5459a>Button</p><!----></a><a class="link" href="/en-US/component/border" data-v-76c5459a><p class="link-text" data-v-76c5459a>Border</p><!----></a><a class="link" href="/en-US/component/color" data-v-76c5459a><p class="link-text" data-v-76c5459a>Color</p><!----></a><a class="link" href="/en-US/component/container" data-v-76c5459a><p class="link-text" data-v-76c5459a>Layout Container</p><!----></a><a class="link" href="/en-US/component/icon" data-v-76c5459a><p class="link-text" data-v-76c5459a>Icon</p><!----></a><a class="link" href="/en-US/component/layout" data-v-76c5459a><p class="link-text" data-v-76c5459a>Layout</p><!----></a><a class="link" href="/en-US/component/link" data-v-76c5459a><p class="link-text" data-v-76c5459a>Link</p><!----></a><a class="link" href="/en-US/component/scrollbar" data-v-76c5459a><p class="link-text" data-v-76c5459a>Scrollbar</p><!----></a><a class="link" href="/en-US/component/space" data-v-76c5459a><p class="link-text" data-v-76c5459a>Space</p><!----></a><a class="link" href="/en-US/component/typography" data-v-76c5459a><p class="link-text" data-v-76c5459a>Typography</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-76c5459a><p class="link-text" data-v-76c5459a>Config Provider</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/cascader" data-v-76c5459a><p class="link-text" data-v-76c5459a>Cascader</p><!----></a><a class="link" href="/en-US/component/checkbox" data-v-76c5459a><p class="link-text" data-v-76c5459a>Checkbox</p><!----></a><a class="link" href="/en-US/component/color-picker" data-v-76c5459a><p class="link-text" data-v-76c5459a>Color Picker</p><!----></a><a class="link" href="/en-US/component/date-picker" data-v-76c5459a><p class="link-text" data-v-76c5459a>Date Picker</p><!----></a><a class="link" href="/en-US/component/datetime-picker" data-v-76c5459a><p class="link-text" data-v-76c5459a>DateTime Picker</p><!----></a><a class="link" href="/en-US/component/form" data-v-76c5459a><p class="link-text" data-v-76c5459a>Form</p><!----></a><a class="link" href="/en-US/component/input" data-v-76c5459a><p class="link-text" data-v-76c5459a>Input</p><!----></a><a class="link" href="/en-US/component/input-number" data-v-76c5459a><p class="link-text" data-v-76c5459a>Input Number</p><!----></a><a class="link" href="/en-US/component/radio" data-v-76c5459a><p class="link-text" data-v-76c5459a>Radio</p><!----></a><a class="link" href="/en-US/component/rate" data-v-76c5459a><p class="link-text" data-v-76c5459a>Rate</p><!----></a><a class="link" href="/en-US/component/select" data-v-76c5459a><p class="link-text" data-v-76c5459a>Select</p><!----></a><a class="link" href="/en-US/component/select-v2" data-v-76c5459a><p class="link-text" data-v-76c5459a>Virtualized Select</p><!----></a><a class="link" href="/en-US/component/slider" data-v-76c5459a><p class="link-text" data-v-76c5459a>Slider</p><!----></a><a class="link" href="/en-US/component/switch" data-v-76c5459a><p class="link-text" data-v-76c5459a>Switch</p><!----></a><a class="link" href="/en-US/component/time-picker" data-v-76c5459a><p class="link-text" data-v-76c5459a>Time Picker</p><!----></a><a class="link" href="/en-US/component/time-select" data-v-76c5459a><p class="link-text" data-v-76c5459a>Time Select</p><!----></a><a class="link" href="/en-US/component/transfer" data-v-76c5459a><p class="link-text" data-v-76c5459a>Transfer</p><!----></a><a class="link" href="/en-US/component/upload" data-v-76c5459a><p class="link-text" data-v-76c5459a>Upload</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-76c5459a><p class="link-text" data-v-76c5459a>Avatar</p><!----></a><a class="link" href="/en-US/component/badge" data-v-76c5459a><p class="link-text" data-v-76c5459a>Badge</p><!----></a><a class="link" href="/en-US/component/calendar" data-v-76c5459a><p class="link-text" data-v-76c5459a>Calendar</p><!----></a><a class="link" href="/en-US/component/card" data-v-76c5459a><p class="link-text" data-v-76c5459a>Card</p><!----></a><a class="link" href="/en-US/component/carousel" data-v-76c5459a><p class="link-text" data-v-76c5459a>Carousel</p><!----></a><a class="link" href="/en-US/component/collapse" data-v-76c5459a><p class="link-text" data-v-76c5459a>Collapse</p><!----></a><a class="link" href="/en-US/component/descriptions" data-v-76c5459a><p class="link-text" data-v-76c5459a>Descriptions</p><!----></a><a class="link" href="/en-US/component/empty" data-v-76c5459a><p class="link-text" data-v-76c5459a>Empty</p><!----></a><a class="link" href="/en-US/component/image" data-v-76c5459a><p class="link-text" data-v-76c5459a>Image</p><!----></a><a class="link" href="/en-US/component/infinite-scroll" data-v-76c5459a><p class="link-text" data-v-76c5459a>Infinite Scroll</p><!----></a><a class="link" href="/en-US/component/pagination" data-v-76c5459a><p class="link-text" data-v-76c5459a>Pagination</p><!----></a><a class="link" href="/en-US/component/progress" data-v-76c5459a><p class="link-text" data-v-76c5459a>Progress</p><!----></a><a class="link" href="/en-US/component/result" data-v-76c5459a><p class="link-text" data-v-76c5459a>Result</p><!----></a><a class="link" href="/en-US/component/skeleton" data-v-76c5459a><p class="link-text" data-v-76c5459a>Skeleton</p><!----></a><a class="link" href="/en-US/component/table" data-v-76c5459a><p class="link-text" data-v-76c5459a>Table</p><!----></a><a class="link" href="/en-US/component/tag" data-v-76c5459a><p class="link-text" data-v-76c5459a>Tag</p><!----></a><a class="link" href="/en-US/component/timeline" data-v-76c5459a><p class="link-text" data-v-76c5459a>Timeline</p><!----></a><a class="link" href="/en-US/component/tree" data-v-76c5459a><p class="link-text" data-v-76c5459a>Tree</p><!----></a><a class="link flex items-center" href="/en-US/component/tree-select" data-v-76c5459a><p class="link-text" data-v-76c5459a>TreeSelect</p><span class="el-tag el-tag--small el-tag--plain is-hit ml-2" style="background-color:;border-radius:9999px;" data-v-76c5459a><span class="el-tag__content"><!--[-->2.1.8<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tree-v2" data-v-76c5459a><p class="link-text" data-v-76c5459a>Virtualized Tree</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-76c5459a><p class="link-text" data-v-76c5459a>Affix</p><!----></a><a class="link" href="/en-US/component/backtop" data-v-76c5459a><p class="link-text" data-v-76c5459a>Backtop</p><!----></a><a class="link" href="/en-US/component/breadcrumb" data-v-76c5459a><p class="link-text" data-v-76c5459a>Breadcrumb</p><!----></a><a class="link" href="/en-US/component/dropdown" data-v-76c5459a><p class="link-text" data-v-76c5459a>Dropdown</p><!----></a><a class="link" href="/en-US/component/menu" data-v-76c5459a><p class="link-text" data-v-76c5459a>Menu</p><!----></a><a class="link" href="/en-US/component/page-header" data-v-76c5459a><p class="link-text" data-v-76c5459a>Page Header</p><!----></a><a class="link" href="/en-US/component/steps" data-v-76c5459a><p class="link-text" data-v-76c5459a>Steps</p><!----></a><a class="link" href="/en-US/component/tabs" data-v-76c5459a><p class="link-text" data-v-76c5459a>Tabs</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/en-US/component/alert" data-v-76c5459a><p class="link-text" data-v-76c5459a>Alert</p><!----></a><a class="link" href="/en-US/component/dialog" data-v-76c5459a><p class="link-text" data-v-76c5459a>Dialog</p><!----></a><a class="link" href="/en-US/component/drawer" data-v-76c5459a><p class="link-text" data-v-76c5459a>Drawer</p><!----></a><a class="link" href="/en-US/component/loading" data-v-76c5459a><p class="link-text" data-v-76c5459a>Loading</p><!----></a><a class="link" href="/en-US/component/message" data-v-76c5459a><p class="link-text" data-v-76c5459a>Message</p><!----></a><a class="link" href="/en-US/component/message-box" data-v-76c5459a><p class="link-text" data-v-76c5459a>Message Box</p><!----></a><a class="link" href="/en-US/component/notification" data-v-76c5459a><p class="link-text" data-v-76c5459a>Notification</p><!----></a><a class="link" href="/en-US/component/popconfirm" data-v-76c5459a><p class="link-text" data-v-76c5459a>Pop Confirm</p><!----></a><a class="link" href="/en-US/component/popover" data-v-76c5459a><p class="link-text" data-v-76c5459a>Popover</p><!----></a><a class="link" href="/en-US/component/tooltip" data-v-76c5459a><p class="link-text" data-v-76c5459a>Tooltip</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/divider" data-v-76c5459a><p class="link-text" data-v-76c5459a>Divider</p><!----></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><main class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="virtualized-table" tabindex="-1">Virtualized Table <a class="header-anchor" href="#virtualized-table" aria-hidden="true">#</a></h1><p>Along with the evolutionary web development, table component has always been the most popular component in our web apps especially for dashboards, data analysis. For <a href="./table.html">Table V1</a>, with even just 1000 records of data, it can be very annoying when using it, because the poor performance.</p><p>With Virtualized Table, you can render massive chunks of data in a blink of an eye.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><strong>Even though</strong> Virtualized Table is efficient, but when the data load is too big, your <strong>network</strong>, <strong>memory size</strong> can be the bottle neck of your app. So keep in mind that Virtualized Table is never the ultimate solution for everything, consider paginate your data, add filters etc.</p></div><h2 id="basic-usage" tabindex="-1">Basic usage <a class="header-anchor" href="#basic-usage" aria-hidden="true">#</a></h2><p>Let's render a basic case of Virtualized Table with 10 columns by 1000 rows, to demonstrate how performant it is.</p><!----><h2 id="customize-cell-renderer" tabindex="-1">Customize Cell Renderer <a class="header-anchor" href="#customize-cell-renderer" aria-hidden="true">#</a></h2><p>Of course, you can render the table cell per your needs, here is a simple example of how to customize your cell.</p><!----><h2 id="table-with-status" tabindex="-1">Table with status <a class="header-anchor" href="#table-with-status" aria-hidden="true">#</a></h2><p>You can highlight your table content to distinguish between "success, information, warning, danger" and other states.</p><p>Use <code>row-class-name</code> to customize how the row looks. In this case, every 10th row will be highlighted with <code>bg-blue-200</code> class, every 5th row will be highlighted with <code>bg-red-100</code> class.</p><!----><h2 id="table-with-sticky-rows" tabindex="-1">Table with sticky rows <a class="header-anchor" href="#table-with-sticky-rows" aria-hidden="true">#</a></h2><p>You can make some rows stick to the top of the table, and that can be very easily achieved by using <code>fixed-data</code> attribute.</p><p>You can add dynamically set the sticky row with scroll events like this example did.</p><!----><h2 id="table-with-fixed-columns" tabindex="-1">Table with fixed columns <a class="header-anchor" href="#table-with-fixed-columns" aria-hidden="true">#</a></h2><p>For some reason, you want to make the columns stick on the left and right, you can do that by adding special attributes for table.</p><p>You can set the column's attribute <code>fixed</code> to <code>true</code> (representing <code>FixedDir.LEFT</code>) or <code>FixedDir.LEFT</code> or <code>FixedDir.RIGHT</code></p><!----><h2 id="grouping-header" tabindex="-1">Grouping header <a class="header-anchor" href="#grouping-header" aria-hidden="true">#</a></h2><p>By customizing your header renderer you can group your header like this example did.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>In this case we used <code>JSX</code> feature which is not supported in the playground, you may try them out in your local environment or online IDEs such as <code>codesandbox</code>.</p><p>It is recommended that you write your table component in JSX, since it contains VNode manipulations.</p></div><!----><h2 id="filter" tabindex="-1">Filter <a class="header-anchor" href="#filter" aria-hidden="true">#</a></h2><p>Virtualized Table providers customizing header renderers for rendering customized header, then we can use that to render filters</p><!----><h2 id="colspan" tabindex="-1">Colspan <a class="header-anchor" href="#colspan" aria-hidden="true">#</a></h2><p>Virtualized table did not use built-in <code>table</code> element, so that <code>colspan</code> and <code>rowspan</code> is a little bit different than <a href="./table.html">TableV1</a>. With customized row renderer, we can still do that. In this case, you'll learn how to do that.</p><!----><h2 id="rowspan" tabindex="-1">Rowspan <a class="header-anchor" href="#rowspan" aria-hidden="true">#</a></h2><p>Since we have <a href="#colspan">Colspan</a> of course we have row span as well, it is a little bit different than colspan but the idea is basically the same.</p><!----><h2 id="rowspan-and-colspan-together" tabindex="-1">Rowspan and Colspan together <a class="header-anchor" href="#rowspan-and-colspan-together" aria-hidden="true">#</a></h2><p>We can combine rowspan and colspan together to meet your business goal!</p><!----><h2 id="source" tabindex="-1">Source <a class="header-anchor" href="#source" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/table-v2" target="_blank" rel="noopener noreferrer">Component</a> • <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/table-v2.md" target="_blank" rel="noopener noreferrer">Docs</a></p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-hidden="true">#</a></h2><div class="mb-4" data-v-78931949><div class="flex flex-wrap gap-4 pt-2" data-v-78931949><!--[--><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/JeremyWuuuuu" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15975785?v=4" class="w-8 h-8 rounded-full" data-v-78931949> JeremyWuuuuu<!--]--><!----></a></div><!--]--></div></div></div></div><footer class="page-footer" data-v-3e2f3e7f><div class="edit" data-v-3e2f3e7f><div class="edit-link" data-v-3e2f3e7f data-v-7d4aa2c8><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/table-v2.md" target="_blank" rel="noopener noreferrer" data-v-7d4aa2c8>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-7d4aa2c8><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-7d4aa2c8><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg><!--]--></i></a></div></div></footer><!----></div><aside ref_key="container" class="toc-wrapper"><nav class="toc-content"><h3 class="toc-content__heading">Contents</h3><ul class="toc-items"><!--[--><li class="toc-item"><a class="toc-link" href="#basic-usage" title="Basic usage">Basic usage</a><!----></li><li class="toc-item"><a class="toc-link" href="#customize-cell-renderer" title="Customize Cell Renderer">Customize Cell Renderer</a><!----></li><li class="toc-item"><a class="toc-link" href="#table-with-status" title="Table with status">Table with status</a><!----></li><li class="toc-item"><a class="toc-link" href="#table-with-sticky-rows" title="Table with sticky rows">Table with sticky rows</a><!----></li><li class="toc-item"><a class="toc-link" href="#table-with-fixed-columns" title="Table with fixed columns">Table with fixed columns</a><!----></li><li class="toc-item"><a class="toc-link" href="#grouping-header" title="Grouping header">Grouping header</a><!----></li><li class="toc-item"><a class="toc-link" href="#filter" title="Filter">Filter</a><!----></li><li class="toc-item"><a class="toc-link" href="#colspan" title="Colspan">Colspan</a><!----></li><li class="toc-item"><a class="toc-link" href="#rowspan" title="Rowspan">Rowspan</a><!----></li><li class="toc-item"><a class="toc-link" href="#rowspan-and-colspan-together" title="Rowspan and Colspan together">Rowspan and Colspan together</a><!----></li><li class="toc-item"><a class="toc-link" href="#source" title="Source">Source</a><!----></li><li class="toc-item"><a class="toc-link" href="#contributors" title="Contributors">Contributors</a><!----></li><!--]--></ul><div class="toc-marker"></div><div class="join mt-4"><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button ref_key="_ref" class="el-button" type="button" style=""><!--v-if--><span class=""><!--[-->Become a Sponsor!<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div></nav></aside></div></main><!----><!----></div></div>
|
||
<script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"ea6059f1\",\"en-us_component_alert.md\":\"72db2e91\",\"en-us_component_avatar.md\":\"f025ddde\",\"en-us_component_backtop.md\":\"04718d5a\",\"en-us_component_badge.md\":\"9450d83e\",\"en-us_component_border.md\":\"2a90a77e\",\"en-us_component_breadcrumb.md\":\"538a0f0b\",\"en-us_component_button.md\":\"731a882c\",\"en-us_component_calendar.md\":\"1f025549\",\"en-us_component_card.md\":\"8a8c015c\",\"en-us_component_carousel.md\":\"fd524170\",\"en-us_component_cascader.md\":\"28d6ab33\",\"en-us_component_checkbox.md\":\"bb774ada\",\"en-us_component_collapse.md\":\"2c8eedfa\",\"en-us_component_color-picker.md\":\"cd283657\",\"en-us_component_color.md\":\"c536f6e5\",\"en-us_component_config-provider.md\":\"0fb6fd1c\",\"en-us_component_container.md\":\"bb510494\",\"en-us_component_date-picker.md\":\"f76e660b\",\"en-us_component_datetime-picker.md\":\"ed21373b\",\"en-us_component_descriptions.md\":\"3dc06f08\",\"en-us_component_dialog.md\":\"d69cc7ef\",\"en-us_component_divider.md\":\"c9da5810\",\"en-us_component_drawer.md\":\"5df4e4eb\",\"en-us_component_dropdown.md\":\"b12054d8\",\"en-us_component_empty.md\":\"571fca34\",\"en-us_component_form.md\":\"e9c76ea9\",\"en-us_component_icon.md\":\"b34f4ca0\",\"en-us_component_image.md\":\"76389f74\",\"en-us_component_infinite-scroll.md\":\"056115dd\",\"en-us_component_input-number.md\":\"bf2a6d2e\",\"en-us_component_input.md\":\"21f32b0f\",\"en-us_component_layout.md\":\"308376c2\",\"en-us_component_link.md\":\"f519ac09\",\"en-us_component_loading.md\":\"7d0ec31d\",\"en-us_component_menu.md\":\"ceb031c8\",\"en-us_component_message-box.md\":\"3c1f2003\",\"en-us_component_message.md\":\"5dfaafa2\",\"en-us_component_notification.md\":\"e2f972d1\",\"en-us_component_page-header.md\":\"e7e341f1\",\"en-us_component_pagination.md\":\"846b329f\",\"en-us_component_popconfirm.md\":\"d791607c\",\"en-us_component_popover.md\":\"c26987e5\",\"en-us_component_progress.md\":\"3c3ed8ba\",\"en-us_component_radio.md\":\"29679385\",\"en-us_component_rate.md\":\"0c59e5b1\",\"en-us_component_result.md\":\"5b10a0db\",\"en-us_component_scrollbar.md\":\"fb3b3b94\",\"en-us_component_select-v2.md\":\"7f6e94df\",\"en-us_component_select.md\":\"792e3eff\",\"en-us_component_skeleton.md\":\"ff800012\",\"en-us_component_slider.md\":\"99471891\",\"en-us_component_space.md\":\"222f869c\",\"en-us_component_steps.md\":\"4c27d747\",\"en-us_component_switch.md\":\"506356e0\",\"en-us_component_table-v2.md\":\"91694532\",\"en-us_component_table.md\":\"1c41a7eb\",\"en-us_component_tabs.md\":\"25ff2574\",\"en-us_component_tag.md\":\"8dd2488a\",\"en-us_component_time-picker.md\":\"c832df6e\",\"en-us_component_time-select.md\":\"99732e04\",\"en-us_component_timeline.md\":\"4ba34ed5\",\"en-us_component_tooltip-v2.md\":\"96a949cc\",\"en-us_component_tooltip.md\":\"3f78cc48\",\"en-us_component_transfer.md\":\"4de554e2\",\"en-us_component_tree-select.md\":\"84a641c4\",\"en-us_component_tree-v2.md\":\"7a57ce8b\",\"en-us_component_tree.md\":\"ca3dfae1\",\"en-us_component_typography.md\":\"50f4b42f\",\"en-us_component_upload.md\":\"477fe0ce\",\"en-us_guide_changelog.md\":\"62398022\",\"en-us_guide_design.md\":\"99dc0940\",\"en-us_guide_i18n.md\":\"933a68b9\",\"en-us_guide_installation.md\":\"f88fb2f0\",\"en-us_guide_migration.md\":\"aca68a43\",\"en-us_guide_nav.md\":\"495f89cc\",\"en-us_guide_quickstart.md\":\"62b0e41d\",\"en-us_guide_theming.md\":\"b93daf45\",\"en-us_guide_transitions.md\":\"f3545567\",\"en-us_index.md\":\"39e4f919\",\"en-us_resource_index.md\":\"006eaff8\",\"index.md\":\"c7113b08\",\"zh-cn_component_affix.md\":\"c5efb387\",\"zh-cn_component_alert.md\":\"8b4ebb8f\",\"zh-cn_component_avatar.md\":\"cbaabcd4\",\"zh-cn_component_backtop.md\":\"d2d16d79\",\"zh-cn_component_badge.md\":\"8cba48d5\",\"zh-cn_component_border.md\":\"676ce25d\",\"zh-cn_component_breadcrumb.md\":\"4027228f\",\"zh-cn_component_button.md\":\"96d421fb\",\"zh-cn_component_calendar.md\":\"6ba13564\",\"zh-cn_component_card.md\":\"d0ef3f80\",\"zh-cn_component_carousel.md\":\"693d5474\",\"zh-cn_component_cascader.md\":\"b795af30\",\"zh-cn_component_checkbox.md\":\"8e32bcfa\",\"zh-cn_component_collapse.md\":\"1baf4892\",\"zh-cn_component_color-picker.md\":\"6c4f2e58\",\"zh-cn_component_color.md\":\"72dedd00\",\"zh-cn_component_config-provider.md\":\"97699832\",\"zh-cn_component_container.md\":\"489cf9bd\",\"zh-cn_component_date-picker.md\":\"df44aa36\",\"zh-cn_component_datetime-picker.md\":\"4ca2227d\",\"zh-cn_component_descriptions.md\":\"464fccd9\",\"zh-cn_component_dialog.md\":\"077da318\",\"zh-cn_component_divider.md\":\"0b914358\",\"zh-cn_component_drawer.md\":\"59bc97f5\",\"zh-cn_component_dropdown.md\":\"e747b80d\",\"zh-cn_component_empty.md\":\"b53e8d59\",\"zh-cn_component_form.md\":\"eb43413b\",\"zh-cn_component_icon.md\":\"405ba262\",\"zh-cn_component_image.md\":\"e60fa4e2\",\"zh-cn_component_infinite-scroll.md\":\"6f9b10b9\",\"zh-cn_component_input-number.md\":\"537e9e8e\",\"zh-cn_component_input.md\":\"99600a14\",\"zh-cn_component_layout.md\":\"b51ea051\",\"zh-cn_component_link.md\":\"6759eca7\",\"zh-cn_component_loading.md\":\"6674c94b\",\"zh-cn_component_menu.md\":\"577969b4\",\"zh-cn_component_message-box.md\":\"f46e97d5\",\"zh-cn_component_message.md\":\"b593efdb\",\"zh-cn_component_notification.md\":\"6311a709\",\"zh-cn_component_page-header.md\":\"e53b0464\",\"zh-cn_component_pagination.md\":\"398b45d4\",\"zh-cn_component_popconfirm.md\":\"5e8eae33\",\"zh-cn_component_popover.md\":\"ecfb39c3\",\"zh-cn_component_progress.md\":\"830ce3d3\",\"zh-cn_component_radio.md\":\"249f3da4\",\"zh-cn_component_rate.md\":\"7628868c\",\"zh-cn_component_result.md\":\"d868e935\",\"zh-cn_component_scrollbar.md\":\"3630ef10\",\"zh-cn_component_select-v2.md\":\"b7d48fa5\",\"zh-cn_component_select.md\":\"17368472\",\"zh-cn_component_skeleton.md\":\"cd67a41d\",\"zh-cn_component_slider.md\":\"29c13fbe\",\"zh-cn_component_space.md\":\"e20d49ab\",\"zh-cn_component_steps.md\":\"16a6ae08\",\"zh-cn_component_switch.md\":\"315319d9\",\"zh-cn_component_table-v2.md\":\"947cf985\",\"zh-cn_component_table.md\":\"0bd5cd6f\",\"zh-cn_component_tabs.md\":\"3f70b604\",\"zh-cn_component_tag.md\":\"77d8091b\",\"zh-cn_component_time-picker.md\":\"8de367a7\",\"zh-cn_component_time-select.md\":\"2f3ebdf4\",\"zh-cn_component_timeline.md\":\"adeb6d1c\",\"zh-cn_component_tooltip-v2.md\":\"88c623f1\",\"zh-cn_component_tooltip.md\":\"3ca2eb13\",\"zh-cn_component_transfer.md\":\"58c6fa0d\",\"zh-cn_component_tree-select.md\":\"c4f233ac\",\"zh-cn_component_tree-v2.md\":\"fddd218b\",\"zh-cn_component_tree.md\":\"b383d9f0\",\"zh-cn_component_typography.md\":\"8d057c34\",\"zh-cn_component_upload.md\":\"ace7242e\",\"zh-cn_guide_changelog.md\":\"efcb66a3\",\"zh-cn_guide_design.md\":\"e5346f6c\",\"zh-cn_guide_i18n.md\":\"3a2383b2\",\"zh-cn_guide_installation.md\":\"3f05bef7\",\"zh-cn_guide_migration.md\":\"f27f1d0e\",\"zh-cn_guide_nav.md\":\"7b48b47a\",\"zh-cn_guide_quickstart.md\":\"36e8905c\",\"zh-cn_guide_theming.md\":\"bf7ba367\",\"zh-cn_guide_transitions.md\":\"0a8c3e44\",\"zh-cn_index.md\":\"53f7b576\",\"zh-cn_resource_index.md\":\"fa5f65a3\"}")</script>
|
||
<script type="module" async src="/assets/app.01b76562.js"></script>
|
||
|
||
</body>
|
||
</html> |