mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-11 11:39:43 +08:00
Code Issues Packages Projects Releases Wiki Activity
8cfc25a7cb
element-plus/es-ES/component/table.html
ElementPlusBot 8cfc25a7cb website deploy
2022-05-23 14:35:43 +00:00

46 lines
80 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Table | Element Plus</title>
<meta name="description" content="a Vue 3 based component library for designers and developers">
<link rel="stylesheet" href="/assets/style.23791d12.css">
<link rel="modulepreload" href="/assets/chunks/with-status.a6a3a077.js">
<link rel="modulepreload" href="/assets/chunks/contributors.141c31b8.js">
<link rel="modulepreload" href="/assets/app.f4abc348.js">
<link rel="modulepreload" href="/assets/es-ES_component_table.md.a4277da0.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">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#409eff">
<meta name="msapplication-config" content="/browserconfig.xml">
<script>window.supportedLangs=["en-US","es-ES","zh-CN"];</script>
<script>(()=>{const o=window.supportedLangs,a="preferred_lang",r="en-US",s={en:"en-US",fr:"fr-FR",es:"es-ES"};let e=localStorage.getItem(a)||navigator.language;const n=s[e]||(o.includes(e)?e:r);if(localStorage.setItem(a,n),e=n,!location.pathname.startsWith(`/${e}`)){const t=[`/${e}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=t.endsWith(".html")||t.endsWith("/")?t:t.concat("/")}navigator&&navigator.serviceWorker.controller&&navigator.serviceWorker.controller.postMessage({type:"LANG",lang:e})})();</script>
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
<script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(o){console.log(o)}).catch(function(o){console.log(o)});</script>
<script async="true">window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-M74ZHEQ1M1"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-M74ZHEQ1M1");</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>
<script async="true">var resource=document.createElement("link");resource.setAttribute("rel","stylesheet"),resource.setAttribute("href","//fonts.loli.net/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap"),resource.setAttribute("type","text/css");var head=document.querySelector("head");head.appendChild(resource);</script>
<script>(()=>{const e=localStorage.getItem("el-theme-appearance");(e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<meta name="twitter:title" content="Table | Element Plus">
<meta property="og:title" content="Table | Element Plus">
</head>
<body>
<div id="app"><div class="App"><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-0baf1018><div class="header-container" data-v-0baf1018><div class="logo-container" data-v-0baf1018><a href="/es-ES/" data-v-0baf1018><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-0baf1018></a></div><div class="content" data-v-0baf1018><div id="docsearch" class="algolia-search-box search" data-v-0baf1018></div><nav class="navbar-menu menu" data-v-0baf1018><!--[--><a class="link-item link is-menu-link" href="/es-ES/guide/design" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Guías<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/es-ES/component/button" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Componentes<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/es-ES/resource/index" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Recursos<!--]--><!--]--><!----></a><!--]--></nav><div class="theme-toggler-content theme-toggler" data-v-0baf1018 data-v-127078e6><div class="switch" role="switch" data-v-127078e6 data-v-3de418c2><div class="switch__action"><div class="switch__icon"><!--[--><i class="el-icon" style="font-size:13px;" data-v-3de418c2><!--[--><svg viewbox="0 0 24 24" class="dark-icon" data-v-3de418c2><path d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z" fill="currentColor"></path></svg><svg viewbox="0 0 24 24" class="light-icon" data-v-3de418c2><path d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z" fill="currentColor"></path></svg><!--]--></i><!--]--></div></div></div></div><div class="translation-container translation" data-v-0baf1018 data-v-dd9c9540><!----></div><div class="social-links" data-v-0baf1018 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-0baf1018><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><a class="el-link el-link--default go-back-top height-5" size="small"><!--v-if--><span class="el-link__inner"><!--[-->Back to top<!--]--></span><!--v-if--></a></div><aside class="sidebar"><!--[--><div class="sponsors" data-v-b631cc3c><p class="sponsors-title" data-v-b631cc3c>Patrocinado por</p><div class="sponsor-container" data-v-b631cc3c data-v-fdd555d0><!--[--><a href="https://vform666.com/vform3.html?from=element_plus" title="VForm - Vue 2/3 可视化低代码表单" class="sponsor-item inline-flex" style="" target="_blank" data-v-fdd555d0><img src="/images/vform-banner.png" alt="VForm" data-v-fdd555d0></a><a href="https://js.design?source=element-plus" title="即时设计 - 专业在线UI设计工具" class="sponsor-item inline-flex" style="" target="_blank" data-v-fdd555d0><img src="/images/js-design-banner.jpg" alt="JSDesign" data-v-fdd555d0></a><!--]--></div><div class="sponsor-container" data-v-b631cc3c data-v-727ef4e6><!--[--><a class="sponsor-item inline-flex items-center" href="https://bit.dev/?from=element-ui" title="bit - Share Code" target="_blank" data-v-727ef4e6><img src="/images/bit.svg" alt="bit" data-v-727ef4e6></a><a class="sponsor-item inline-flex items-center" href="https://www.renren.io/?from=element-ui" title="人人开源 - 企业级的快速开发平台" target="_blank" data-v-727ef4e6><img src="/images/renren.png" alt="renren.io" data-v-727ef4e6></a><a class="sponsor-item inline-flex items-center" href="https://form.making.link/?from=element_plus" title="FormMaking - Vue表单设计器，赋能企业快速开发" target="_blank" data-v-727ef4e6><img src="/images/formmaking.png" alt="FormMaking" data-v-727ef4e6></a><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/es-ES/component/button" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Button</p><!----></a><a class="link" href="/es-ES/component/border" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Border</p><!----></a><a class="link" href="/es-ES/component/color" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Color</p><!----></a><a class="link" href="/es-ES/component/container" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Layout Container</p><!----></a><a class="link" href="/es-ES/component/icon" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Icon</p><!----></a><a class="link" href="/es-ES/component/layout" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Layout</p><!----></a><a class="link" href="/es-ES/component/link" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Link</p><!----></a><a class="link" href="/es-ES/component/scrollbar" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Scrollbar</p><!----></a><a class="link" href="/es-ES/component/space" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Space</p><!----></a><a class="link" href="/es-ES/component/typography" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Typography</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/es-ES/component/config-provider" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Config Provider</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/es-ES/component/cascader" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Cascader</p><!----></a><a class="link" href="/es-ES/component/checkbox" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Checkbox</p><!----></a><a class="link" href="/es-ES/component/color-picker" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Color Picker</p><!----></a><a class="link" href="/es-ES/component/date-picker" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Date Picker</p><!----></a><a class="link" href="/es-ES/component/datetime-picker" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>DateTime Picker</p><!----></a><a class="link" href="/es-ES/component/form" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Form</p><!----></a><a class="link" href="/es-ES/component/input" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Input</p><!----></a><a class="link" href="/es-ES/component/input-number" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Input Number</p><!----></a><a class="link" href="/es-ES/component/radio" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Radio</p><!----></a><a class="link" href="/es-ES/component/rate" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Rate</p><!----></a><a class="link" href="/es-ES/component/select" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Select</p><!----></a><a class="link" href="/es-ES/component/select-v2" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Virtualized Select</p><!----></a><a class="link" href="/es-ES/component/slider" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Slider</p><!----></a><a class="link" href="/es-ES/component/switch" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Switch</p><!----></a><a class="link" href="/es-ES/component/time-picker" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Time Picker</p><!----></a><a class="link" href="/es-ES/component/time-select" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Time Select</p><!----></a><a class="link" href="/es-ES/component/transfer" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Transfer</p><!----></a><a class="link" href="/es-ES/component/upload" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Upload</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/es-ES/component/avatar" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Avatar</p><!----></a><a class="link" href="/es-ES/component/badge" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Badge</p><!----></a><a class="link" href="/es-ES/component/calendar" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Calendar</p><!----></a><a class="link" href="/es-ES/component/card" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Card</p><!----></a><a class="link" href="/es-ES/component/carousel" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Carousel</p><!----></a><a class="link" href="/es-ES/component/collapse" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Collapse</p><!----></a><a class="link" href="/es-ES/component/descriptions" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Descriptions</p><!----></a><a class="link" href="/es-ES/component/empty" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Empty</p><!----></a><a class="link" href="/es-ES/component/image" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Image</p><!----></a><a class="link" href="/es-ES/component/infinite-scroll" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Infinite Scroll</p><!----></a><a class="link" href="/es-ES/component/pagination" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Pagination</p><!----></a><a class="link" href="/es-ES/component/progress" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Progress</p><!----></a><a class="link" href="/es-ES/component/result" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Result</p><!----></a><a class="link" href="/es-ES/component/skeleton" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Skeleton</p><!----></a><a class="link active" href="/es-ES/component/table" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Table</p><!----></a><a class="link flex items-center" href="/es-ES/component/table-v2" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Virtualized Table</p><span class="el-tag el-tag--small el-tag--plain is-hit is-round ml-2" style="background-color:;" data-v-8fa0a68a><span class="el-tag__content"><!--[-->2.2.0<!--]--></span><!--v-if--></span></a><a class="link" href="/es-ES/component/tag" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Tag</p><!----></a><a class="link" href="/es-ES/component/timeline" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Timeline</p><!----></a><a class="link" href="/es-ES/component/tree" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Tree</p><!----></a><a class="link flex items-center" href="/es-ES/component/tree-select" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>TreeSelect</p><span class="el-tag el-tag--small el-tag--plain is-hit is-round ml-2" style="background-color:;" data-v-8fa0a68a><span class="el-tag__content"><!--[-->2.1.8<!--]--></span><!--v-if--></span></a><a class="link" href="/es-ES/component/tree-v2" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Virtualized Tree</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/es-ES/component/affix" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Affix</p><!----></a><a class="link" href="/es-ES/component/backtop" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Backtop</p><!----></a><a class="link" href="/es-ES/component/breadcrumb" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Breadcrumb</p><!----></a><a class="link" href="/es-ES/component/dropdown" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Dropdown</p><!----></a><a class="link" href="/es-ES/component/menu" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Menu</p><!----></a><a class="link" href="/es-ES/component/page-header" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Page Header</p><!----></a><a class="link" href="/es-ES/component/steps" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Steps</p><!----></a><a class="link" href="/es-ES/component/tabs" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Tabs</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/es-ES/component/alert" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Alert</p><!----></a><a class="link" href="/es-ES/component/dialog" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Dialog</p><!----></a><a class="link" href="/es-ES/component/drawer" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Drawer</p><!----></a><a class="link" href="/es-ES/component/loading" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Loading</p><!----></a><a class="link" href="/es-ES/component/message" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Message</p><!----></a><a class="link" href="/es-ES/component/message-box" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Message Box</p><!----></a><a class="link" href="/es-ES/component/notification" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Notification</p><!----></a><a class="link" href="/es-ES/component/popconfirm" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Pop Confirm</p><!----></a><a class="link" href="/es-ES/component/popover" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Popover</p><!----></a><a class="link" href="/es-ES/component/tooltip" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>Tooltip</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/es-ES/component/divider" data-v-8fa0a68a><p class="link-text" data-v-8fa0a68a>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="table" tabindex="-1">Table <a class="header-anchor" href="#table" aria-hidden="true">#</a></h1><p>Visualiza múltiples datos con un formato similar. Puede ordenar, filtrar y comparar sus datos en la tabla.</p><h2 id="tabla-basica" tabindex="-1">Tabla básica <a class="header-anchor" href="#tabla-basica" aria-hidden="true">#</a></h2><p>La tabla básica es solo para mostrar datos.</p><!----><h2 id="tabla-con-franjas" tabindex="-1">Tabla con franjas <a class="header-anchor" href="#tabla-con-franjas" aria-hidden="true">#</a></h2><p>La tabla con franjas hace más fácil distinguir filas diferentes.</p><!----><h2 id="tabla-con-bordes" tabindex="-1">Tabla con bordes <a class="header-anchor" href="#tabla-con-bordes" aria-hidden="true">#</a></h2><!----><h2 id="tabla-con-estados" tabindex="-1">Tabla con estados <a class="header-anchor" href="#tabla-con-estados" aria-hidden="true">#</a></h2><p>Puede destacar el contenido de la tabla para distinguir entre &quot;success, information, warning, danger&quot; y otros estados.</p><!----><h2 id="tabla-con-cabecera-fija" tabindex="-1">Tabla con cabecera fija <a class="header-anchor" href="#tabla-con-cabecera-fija" aria-hidden="true">#</a></h2><p>Cuando hay demasiadas filas, puede usar una cabecera fija.</p><!----><h2 id="tabla-con-columnas-fijas" tabindex="-1">Tabla con columnas fijas <a class="header-anchor" href="#tabla-con-columnas-fijas" aria-hidden="true">#</a></h2><p>Cuando se tienen demasiadas columnas, puede fijar algunas de ellas.</p><!----><h2 id="tabla-con-columnas-y-cabecera-fija" tabindex="-1">Tabla con columnas y cabecera fija <a class="header-anchor" href="#tabla-con-columnas-y-cabecera-fija" aria-hidden="true">#</a></h2><p>Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.</p><!----><h2 id="tabla-de-altura-fluida-con-cabecera-fija-y-columnas" tabindex="-1">Tabla de altura fluida con cabecera fija (y columnas) <a class="header-anchor" href="#tabla-de-altura-fluida-con-cabecera-fija-y-columnas" aria-hidden="true">#</a></h2><p>Cuando los datos se cambian dinámicamente, tal vez desee que la tabla tenga una altura máxima en lugar de una altura fija y que muestre la barra de desplazamiento si es necesario.</p><!----><h2 id="agrupando-cabeceras-de-la-tabla" tabindex="-1">Agrupando cabeceras de la tabla <a class="header-anchor" href="#agrupando-cabeceras-de-la-tabla" aria-hidden="true">#</a></h2><p>Cuando la estructura de datos es compleja, puede usar la cabecera de grupo para mostrar la jerarquía de datos.</p><!----><h2 id="seleccion-simple" tabindex="-1">Selección simple <a class="header-anchor" href="#seleccion-simple" aria-hidden="true">#</a></h2><p>La selección de una fila está soportada.</p><!----><h2 id="seleccion-multiple" tabindex="-1">Selección multiple <a class="header-anchor" href="#seleccion-multiple" aria-hidden="true">#</a></h2><p>También puede seleccionar múltiples filas.</p><!----><h2 id="ordenar" tabindex="-1">Ordenar <a class="header-anchor" href="#ordenar" aria-hidden="true">#</a></h2><p>Ordenar los datos para encontrar o comparar información rápidamente.</p><!----><h2 id="filtros" tabindex="-1">Filtros <a class="header-anchor" href="#filtros" aria-hidden="true">#</a></h2><p>Filtra la tabla para encontrar la información que necesita.</p><!----><h2 id="plantilla-de-columna-personalizada" tabindex="-1">Plantilla de columna personalizada <a class="header-anchor" href="#plantilla-de-columna-personalizada" aria-hidden="true">#</a></h2><p>Personalice la columna de la tabla para que pueda integrarse con otros componentes.</p><!----><h2 id="tabla-con-cabecera-personalizada" tabindex="-1">Tabla con cabecera personalizada <a class="header-anchor" href="#tabla-con-cabecera-personalizada" aria-hidden="true">#</a></h2><p>Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.</p><!----><h2 id="filas-expandibles" tabindex="-1">Filas expandibles <a class="header-anchor" href="#filas-expandibles" aria-hidden="true">#</a></h2><p>Cuando el contenido de la fila es demasiado largo y no quiere mostrar la barra de desplazamiento horizontal, puede usar la función de fila expandible.</p><!----><h2 id="datos-con-estructura-de-arbol-y-modo-perezoso" tabindex="-1">Datos con estructura de árbol y modo perezoso <a class="header-anchor" href="#datos-con-estructura-de-arbol-y-modo-perezoso" aria-hidden="true">#</a></h2><!----><h2 id="fila-resumen" tabindex="-1">Fila resumen <a class="header-anchor" href="#fila-resumen" aria-hidden="true">#</a></h2><p>Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.</p><!----><h2 id="rowspan-y-colspan" tabindex="-1">Rowspan y colspan <a class="header-anchor" href="#rowspan-y-colspan" aria-hidden="true">#</a></h2><p>Configure rowspan y colspan para combinar las celdas</p><!----><h2 id="indice-personalizado" tabindex="-1">Índice personalizado <a class="header-anchor" href="#indice-personalizado" aria-hidden="true">#</a></h2><p>Puede personalizar el índice de la fila con la propiedad <code>type=index</code> de las columnas.</p><!----><h2 id="disposicion-de-la-tabla" tabindex="-1">Disposición de la tabla <a class="header-anchor" href="#disposicion-de-la-tabla" aria-hidden="true">#</a></h2><p>La propiedad <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout" target="_blank" rel="noopener noreferrer">table-layout</a> establece el algoritmo usado para exponer celdas de tablas, filas y columnas.</p><!----><h2 id="atributos-de-la-tabla" tabindex="-1">Atributos de la tabla <a class="header-anchor" href="#atributos-de-la-tabla" aria-hidden="true">#</a></h2><table><thead><tr><th>Atributo</th><th>Descripción</th><th>Tipo</th><th>Valores aceptados</th><th>Por defecto</th></tr></thead><tbody><tr><td>data</td><td>Datos de la tabla</td><td>array</td><td>—</td><td>—</td></tr><tr><td>height</td><td>Altura de la tabla. Por defecto tiene una altura <code>auto</code>. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, se asigna ese valor al style.height de la tabla, la altura es afectada por estilos externos</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>max-height</td><td>Altura máxima de la tabla. El valor legal es un número o la altura en px.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>stripe</td><td>especifica si la tabla se mostrara con franjas</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>border</td><td>especifica si la tabla tiene bordes verticales</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>size</td><td>tamaño de la tabla</td><td>string</td><td>large / default /small</td><td>—</td></tr><tr><td>fit</td><td>especifica si el ancho de la columna se adapta automáticamente a su contenedor</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>show-header</td><td>especifica si la cabecera de la tabla es visible</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>highlight-current-row</td><td>especifica si la fila actual estara resaltada</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>current-row-key</td><td>clave de la fila actual, un ajuste unicamente de prop</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>row-class-name</td><td>función que devuelve nombres de clases personalizadas para las filas, o una cadena asignando el nombre de clase para cada fila</td><td>function({ row, rowIndex }) / string</td><td>—</td><td>—</td></tr><tr><td>row-style</td><td>función que devuelve el estilo personalizado para cada fila, o un objeto asignando el estilo personalizado para todas las filas</td><td>function({ row, rowIndex }) / object</td><td>—</td><td>—</td></tr><tr><td>cell-class-name</td><td>función que devuelve nombres de clases personalizadas para las celdas, o una cadena asignando el nombre de clase para cada celda</td><td>function({ row, column, rowIndex, columnIndex }) / string</td><td>—</td><td>—</td></tr><tr><td>cell-style</td><td>función que devuelve estilos personalizados para cada celda, o un objeto asignado el estilo personalizado para todas las celdas</td><td>function({ row, column, rowIndex, columnIndex }) / object</td><td>—</td><td>—</td></tr><tr><td>header-row-class-name</td><td>función que devuelve nombre de clases personalizadas para cada fila en la cabecera de la tabla, o una cadena asignando nombre de clase para todas las filas en la cabecera de la tabla</td><td>function({ row, rowIndex }) / string</td><td>—</td><td>—</td></tr><tr><td>header-row-style</td><td>función que devuelve estilos personalizados para cada una de las filas en la cabecera de la tabla, o un objeto asignando el estilo personalizado para todas las filas en la cabecera de la tabla</td><td>function({ row, rowIndex }) / object</td><td>—</td><td>—</td></tr><tr><td>header-cell-class-name</td><td>función que devuelve nombres de clases personalizada para cada celda en la cabecera de la tabla, o una cadena asignando el nombre de clase para todas las celda en la cabecera de la tabla</td><td>function({ row, column, rowIndex, columnIndex }) / string</td><td>—</td><td>—</td></tr><tr><td>header-cell-style</td><td>función que devuelve estilos personalizados para cada celda en la cabecera de la tabla, o un objeto asignando el estilo personalizado para todas las celdas en la cabecera de la tabla</td><td>function({ row, column, rowIndex, columnIndex }) / object</td><td>—</td><td>—</td></tr><tr><td>row-key</td><td>key de los datos de las filas, utilizada para optimizar el renderizado. Requerido si <code>reserve-selection</code> está activada o muestra los datos con formato de árbol. Cuando su tipo es String, se admite el acceso multinivel, por ejemplo, <code>user.info.id</code>, pero <code>user.info[0].id</code> no se admite, en cuyo caso se debe utilizar <code>Function</code>.</td><td>function(row) / string</td><td>—</td><td>—</td></tr><tr><td>empty-text</td><td>Texto mostrado cuando no existen datos. Puede personalizar esta área con <code>#empty</code></td><td>string</td><td>—</td><td>Sin Datos</td></tr><tr><td>default-expand-all</td><td>especifica si todas las filas se expanden por defecto, solo funciona cuando la tabla tiene una columna type=&quot;expand&quot; o contiene datos de estructura de árbol</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>expand-row-keys</td><td>establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer <code>row-key</code> antes de usar esta propiedad</td><td>array</td><td>—</td><td>—</td></tr><tr><td>default-sort</td><td>establece la columna y orden por defecto. la propiedad <code>prop</code> es utilizada para establecer la columna de ordenamiento por defecto, la propiedad <code>order</code> es utilizada para definir el tipo de orden por defecto</td><td>object</td><td><code>order</code>: ascending / descending</td><td>si <code>prop</code> está establecido y <code>order</code> no está definida, entonces por defecto es <code>ascending</code></td></tr><tr><td>tooltip-effect</td><td>propiedad <code>effect</code> para efectos en tooltip</td><td>string</td><td>dark / light</td><td>dark</td></tr><tr><td>show-summary</td><td>especifica si debe mostrar la fila de resumen</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>sum-text</td><td>texto a mostrar para la primer columna de la fila de resumen</td><td>string</td><td>—</td><td>Sum</td></tr><tr><td>summary-method</td><td>método personalizado para resumen</td><td>function({ columns, data })</td><td>—</td><td>—</td></tr><tr><td>span-method</td><td>método que devuelve rowspan y colspan</td><td>function({ row, column, rowIndex, columnIndex })</td><td>—</td><td>—</td></tr><tr><td>select-on-indeterminate</td><td>controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>indent</td><td>indentación horizontal de los datos en formato de estructura de árbol</td><td>number</td><td>—</td><td>16</td></tr><tr><td>lazy</td><td>si se realiza un lazy loading de los datos</td><td>boolean</td><td>—</td><td>—</td></tr><tr><td>load</td><td>método para cargar las filas de los hijos, solamente funciona cuando <code>lazy</code> es true</td><td>function(row, treeNode, resolve)</td><td>—</td><td>—</td></tr><tr><td>tree-props</td><td>configuración para renderizar datos anidados</td><td>object</td><td>—</td><td><code>{ hasChildren: &#39;hasChildren&#39;, children: &#39;children&#39; }</code></td></tr><tr><td>table-layout</td><td>Establece el algoritmo usado para mostrar celdas de tablas, filas y columnas</td><td>string</td><td>fixed / auto</td><td>fixed</td></tr><tr><td>scrollbar-always-on</td><td>mostrar siempre la barra de desplazamiento</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>flexible <span class="el-tag el-tag--small el-tag--plain is-hit is-round" style="background-color:;"><span class="el-tag__content"><!--[-->2.2.1<!--]--></span><!--v-if--></span></td><td>ensure main axis minimum-size doesn&#39;t follow the content</td><td>boolean</td><td>—</td><td>false</td></tr></tbody></table><h2 id="eventos-de-la-tabla" tabindex="-1">Eventos de la tabla <a class="header-anchor" href="#eventos-de-la-tabla" aria-hidden="true">#</a></h2><table><thead><tr><th>Nombre de evento</th><th>Descripción</th><th>Parametros</th></tr></thead><tbody><tr><td>select</td><td>se dispara cuando el usuario hace clic al <em>checkbox</em> (caja de selección) en una fila</td><td>selection, row</td></tr><tr><td>select-all</td><td>se dispara cando el usuario hace clic al <em>checkbox</em> (caja de selección) en la cabecera de la tabla</td><td>selection</td></tr><tr><td>selection-change</td><td>se dispara cuando la selección cambia</td><td>selection</td></tr><tr><td>cell-mouse-enter</td><td>se dispara cuando el ratón se desplaza dentro de una celda</td><td>row, column, cell, event</td></tr><tr><td>cell-mouse-leave</td><td>se dispara cuando el ratón se desplaza fuera de una celda</td><td>row, column, cell, event</td></tr><tr><td>cell-click</td><td>se dispara cuando se hace clic en una celda</td><td>row, column, cell, event</td></tr><tr><td>cell-dblclick</td><td>se dispara cuando se hace doble clic en una celda</td><td>row, column, cell, event</td></tr><tr><td>cell-contextmenu</td><td>se dispara cuando el usuario hace clic derecho en una celda</td><td>row, column, cell, event</td></tr><tr><td>row-click</td><td>se dispara cuando se hace clic en una fila</td><td>row, column, event</td></tr><tr><td>row-contextmenu</td><td>se dispara cuando el usuario hace clic derecho en una fila</td><td>row, column, event</td></tr><tr><td>row-dblclick</td><td>se dispara cuando se hace doble clic en una fila</td><td>row, column, event</td></tr><tr><td>header-click</td><td>se dispara cuando se hace clic en una cabecera de columna</td><td>column, event</td></tr><tr><td>header-contextmenu</td><td>se dispara cuando el usuario hace clic derecho en una cabecera de columna</td><td>column, event</td></tr><tr><td>sort-change</td><td>se dispara cuando el orden de la tabla cambia</td><td><code>{ column, prop, order }</code></td></tr><tr><td>filter-change</td><td>column&#39;s key. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada</td><td>filters</td></tr><tr><td>current-change</td><td>se dispara cuando la fila actual cambia</td><td>currentRow, oldCurrentRow</td></tr><tr><td>header-dragend</td><td>se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera</td><td>newWidth, oldWidth, column, event</td></tr><tr><td>expand-change</td><td>se activa cuando el usuario expande o colapsa una fila (para la tabla expansible, el segundo parámetro es expandedRows; para la tabla de árbol, el segundo parámetro es expanded)</td><td>row, (expandedRows | expanded)</td></tr></tbody></table><h2 id="metodos-de-la-tabla" tabindex="-1">Métodos de la tabla <a class="header-anchor" href="#metodos-de-la-tabla" aria-hidden="true">#</a></h2><table><thead><tr><th>Método</th><th>Descripción</th><th>Parámetros</th></tr></thead><tbody><tr><td>clearSelection</td><td>utilizado en selección múltiple de la tabla, limpia lo seleccionado</td><td>—</td></tr><tr><td>getSelectionRows</td><td>devuelve las filas seleccionadas</td><td></td></tr><tr><td>toggleRowSelection</td><td>usado en la tabla de selección múltiple, conmuta si se selecciona una fila determinada. Con el segundo parámetro, puede establecer directamente si esta fila está seleccionada</td><td>row, selected</td></tr><tr><td>toggleAllSelection</td><td>usado en la tabla de selección múltiple, alterna seleccionar todas o anular todas</td><td>—</td></tr><tr><td>toggleRowExpansion</td><td>utilizado en la tabla expandible o en la tabla de árbol, conmuta si se expande una determinada fila. Con el segundo parámetro, puede establecer directamente si este registro se expande o colapsa</td><td>row, expanded</td></tr><tr><td>setCurrentRow</td><td>utilizado en tabla con selección sencilla, establece una cierta fila como seleccionada. Si se llama sin ningún parámetro, se borrará la selección.</td><td>row</td></tr><tr><td>clearSort</td><td>borra el orden, restaurando los datos al orden original</td><td>—</td></tr><tr><td>clearFilter</td><td>limpia los filtros de las columnas cuyas <code>columnKey</code> han sido pasadas. Si no hay parámetros, borrar todos los filtros</td><td>columnKeys</td></tr><tr><td>doLayout</td><td>actualizar el diseño de la tabla. Cuando la visibilidad de la tabla cambia, puede necesitar llamar a este método para obtener un diseño correcto</td><td>—</td></tr><tr><td>sort</td><td>ordena la tabla manualmente. La propiedad <code>prop</code> se utiliza para establecer la columna de ordenación, la propiedad <code>order</code> se utiliza para establecer el orden</td><td>prop: string, order: string</td></tr><tr><td>scrollTo</td><td>desplaza a un conjunto particular de coordenadas</td><td>(options: ScrollToOptions | number, yCoord?: number)</td></tr><tr><td>setScrollTop</td><td>fija posición de desplazamiento vertical</td><td>top</td></tr><tr><td>setScrollLeft</td><td>fija posición de desplazamiento horizontal</td><td>left</td></tr></tbody></table><h2 id="slots-de-la-tabla" tabindex="-1">Slots de la tabla <a class="header-anchor" href="#slots-de-la-tabla" aria-hidden="true">#</a></h2><table><thead><tr><th>Nombre</th><th>Descripción</th><th>Subetiquetas</th></tr></thead><tbody><tr><td>-</td><td>personalizar contenido por defecto</td><td>Table-column</td></tr><tr><td>append</td><td>Contenidos a insertarse después de la última fila. Es posible que necesite este espacio si desea implementar <em>scroll</em> infinito para la tabla. Este slot se mostrará por encima de la fila de resumen si la hay.</td><td>—</td></tr><tr><td>empty</td><td>puedes personalizar el contenido cuando los datos están vacíos.</td><td>—</td></tr></tbody></table><h2 id="atributos-para-las-columnas-de-la-tabla" tabindex="-1">Atributos para las columnas de la tabla <a class="header-anchor" href="#atributos-para-las-columnas-de-la-tabla" aria-hidden="true">#</a></h2><table><thead><tr><th>Atributo</th><th>Descripción</th><th>Tipo</th><th>Valores Aceptados</th><th>Por defecto</th></tr></thead><tbody><tr><td>type</td><td>tipo de columna. Si se establece a <code>selection</code>, la columna puede mostrar un <em>checkbox</em>. Si se establece a <code>index</code>, la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece en <code>expandir</code>, la columna mostrará el icono de expansión.</td><td>string</td><td>selection / index / expand</td><td>—</td></tr><tr><td>index</td><td>personaliza los índices para cada fila, funciona en columnas con <code>type=index</code></td><td>number / function(index)</td><td>—</td><td>—</td></tr><tr><td>label</td><td>etiqueta de la columna</td><td>string</td><td>—</td><td>—</td></tr><tr><td>column-key</td><td>clave de la columna. Si necesita utilizar el evento <code>filter-change</code>, se usara este atributo para identificar que columna está siendo filtrada</td><td>string</td><td>—</td><td>—</td></tr><tr><td>prop</td><td>nombre del campo. También puede usar su alias: <code>property</code></td><td>string</td><td>—</td><td>—</td></tr><tr><td>width</td><td>ancho de la columna</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>min-width</td><td>ancho mínimo de la columna. Columnas con <code>width</code> tienen un ancho fijo, mientras que las columnas con <code>min-width</code> tienen un ancho que se distribuye en proporción</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>fixed</td><td>específica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es <code>true</code></td><td>string / boolean</td><td>true / &#39;left&#39; / &#39;right&#39;</td><td>—</td></tr><tr><td>render-header</td><td>función de renderizado para la cabecera de la tabla de esta columna</td><td>function({ column, $index })</td><td>—</td><td>—</td></tr><tr><td>sortable</td><td>si la columna puede ser ordenada. La ordenación remota se puede hacer estableciendo este atributo a &#39;custom&#39; y escuchando el evento <code>sort-change</code> de la tabla</td><td>boolean / string</td><td>true / false / &#39;custom&#39;</td><td>false</td></tr><tr><td>sort-method</td><td>método para ordenar, funciona cuando <code>sortable</code> está en <code>true</code>. Debería devolver un número, al igual que Array.sort</td><td>function(a, b)</td><td>—</td><td>—</td></tr><tr><td>sort-by</td><td>especifica cuál es la propiedad por la cual se va a ordenar, funciona cuando <code>sortable</code> es <code>true</code> y <code>sort-method</code> es <code>undefined</code>. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual</td><td>function(row, index) / string / array</td><td>—</td><td>—</td></tr><tr><td>sort-orders</td><td>la estrategia para ordenar los datos, funciona cuando <code>sortable</code> es <code>true</code>. Acepta un arreglo, a medida que el usuario hace clic en el encabezado, la columna se ordena siguiendo la secuencia de los elementos del arreglo</td><td>array</td><td>los elementos en el arreglo necesitan ser uno de los siguientes: <code>ascending</code>, <code>descending</code> y <code>null</code> (restaura el orden original)</td><td>[&#39;ascending&#39;, &#39;descending&#39;, null]</td></tr><tr><td>resizable</td><td>si el ancho de la columna puede ser redimensionado, funciona cuando <code>border</code> de <code>el-table</code> está en <code>true</code></td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>formatter</td><td>función que da formato al contenido de la celda</td><td>function(row, column, cellValue, index)</td><td>—</td><td>—</td></tr><tr><td>show-overflow-tooltip</td><td>si oculta contenido extra y lo muestra en un <em>tooltip</em> al pasar el cursor sobre la celda</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>align</td><td>alineación</td><td>string</td><td>left / center / right</td><td>left</td></tr><tr><td>header-align</td><td>alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior: <code>align</code></td><td>string</td><td>left / center / right</td><td>—</td></tr><tr><td>class-name</td><td>nombre de la clase Css de la celda en la columna</td><td>string</td><td>—</td><td>—</td></tr><tr><td>label-class-name</td><td>nombre de la clase Css de la etiqueta de esta columna</td><td>string</td><td>—</td><td>—</td></tr><tr><td>selectable</td><td>función que determina si una cierta fila puede ser seleccionada, funciona cuando <code>type</code> está en <code>selection</code></td><td>function(row, index)</td><td>—</td><td>—</td></tr><tr><td>reserve-selection</td><td>específica si se reserva la selección después de actualizar los datos, funciona cuando <code>type</code> está en <code>selection</code>. Note que <code>row-key</code> es requerido para que esto funcione</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>filters</td><td>un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, <code>text</code> y <code>value</code> son obligatorios</td><td>array[{ text, value }]</td><td>—</td><td>—</td></tr><tr><td>filter-placement</td><td>ubicación del menú desplegable de filtros</td><td>string</td><td>top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end</td><td>—</td></tr><tr><td>filter-multiple</td><td>si el filtrado de datos soporta múltiples opciones</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>filter-method</td><td>método para filtrado de datos. Si <code>filter-multiple</code> está activado, este método será llamado varias veces por cada fila, y se mostrará la fila si la llamada devuelve <code>true</code></td><td>function(value, row, column)</td><td>—</td><td>—</td></tr><tr><td>filtered-value</td><td>el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla es renderizado con <code>render-header</code></td><td>array</td><td>—</td><td>—</td></tr></tbody></table><h2 id="slots-de-las-columnas-de-la-tabla" tabindex="-1">Slots de las columnas de la tabla <a class="header-anchor" href="#slots-de-las-columnas-de-la-tabla" aria-hidden="true">#</a></h2><table><thead><tr><th>Nombre</th><th>Descripción</th></tr></thead><tbody><tr><td>—</td><td>Contenido personalizado para las columnas de la tabla. El parámetro del scope es <code>{ row, column, $index }</code></td></tr><tr><td>header</td><td>Contenido personalizado para el encabezado de la tabla. El parámetro del scope es <code>{ column, $index }</code></td></tr></tbody></table><h2 id="faq" tabindex="-1">FAQ <a class="header-anchor" href="#faq" aria-hidden="true">#</a></h2><h4 id="¿como-usar-la-vista-previa-de-la-imagen-en-la-tabla" tabindex="-1">¿Cómo usar la vista previa de la imagen en la tabla? <a class="header-anchor" href="#¿como-usar-la-vista-previa-de-la-imagen-en-la-tabla" aria-hidden="true">#</a></h4><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thumbnail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>180<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-image</span> <span class="token attr-name">:preview-src-list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>srcList<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>PS: puesto que la columna fija está implementada por sticky, cuando tiene columnas fijas en la tabla, agregue el atributo <code>preview-teleported</code> en la imagen</p><h4 id="¿por-que-la-columna-no-se-procesa-cuando-se-usan-plantillas-dom" tabindex="-1">¿Por qué la columna no se procesa cuando se usan plantillas DOM? <a class="header-anchor" href="#¿por-que-la-columna-no-se-procesa-cuando-se-usan-plantillas-dom" aria-hidden="true">#</a></h4><p>Tipica issue: <a href="https://github.com/element-plus/element-plus/issues/5046" target="_blank" rel="noopener noreferrer">#5046</a> <a href="https://github.com/element-plus/element-plus/issues/5862" target="_blank" rel="noopener noreferrer">#5862</a> <a href="https://github.com/element-plus/element-plus/issues/6919" target="_blank" rel="noopener noreferrer">#6919</a></p><p>Esto se debe a que la especificación HTML solo permite que algunos elementos específicos omitan las etiquetas de cierre, los más comunes son <code>&lt;input&gt;</code> y <code>&lt;img&gt;</code>. Para todos los demás elementos, si omite la etiqueta de cierre, el analizador nativo HTML pensará que nunca terminó la etiqueta de apertura</p><p>Para obtener más información, consulte <a href="https://vuejs.org/guide/essentials/component-basics.html#self-closing-tags" target="_blank" rel="noopener noreferrer">documentos vue</a></p><h2 id="fuente" tabindex="-1">Fuente <a class="header-anchor" href="#fuente" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/table" target="_blank" rel="noopener noreferrer">Componentes</a> • <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/table.md" target="_blank" rel="noopener noreferrer">Documentación</a></p><h2 id="contribuidores" tabindex="-1">Contribuidores <a class="header-anchor" href="#contribuidores" 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/msidolphin" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26672484?v=4" class="w-8 h-8 rounded-full" data-v-78931949> msidolphin<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/sxzz" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6481596?v=4" class="w-8 h-8 rounded-full" data-v-78931949> 三咲智子<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/YunYouJun" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/25154432?v=4" class="w-8 h-8 rounded-full" data-v-78931949> 云游君<!--]--><!----></a></div><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 data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/adaex" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/29560987?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Aex<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/plainheart" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26999792?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Zhongxiang Wang<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/iamkun" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/17680888?v=4" class="w-8 h-8 rounded-full" data-v-78931949> iamkun<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/kooriookami" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/38392315?v=4" class="w-8 h-8 rounded-full" data-v-78931949> kooriookami<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/emojiiii" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30518686?v=4" class="w-8 h-8 rounded-full" data-v-78931949> C.Y.Kun<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/buqiyuan" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/39730999?v=4" class="w-8 h-8 rounded-full" data-v-78931949> bqy_fe<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/cokemine" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/45122329?v=4" class="w-8 h-8 rounded-full" data-v-78931949> 神楽坂みずき<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/Alanscut" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/21104054?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Alan Wang<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/justwiner" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30335393?v=4" class="w-8 h-8 rounded-full" data-v-78931949> justwiner<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/josonho" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/26833520?v=4" class="w-8 h-8 rounded-full" data-v-78931949> joson<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/purepear" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/144010?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Delyan Haralanov<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/hminghe" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/1744129?v=4" class="w-8 h-8 rounded-full" data-v-78931949> hminghe<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/kakigakki" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/45614103?v=4" class="w-8 h-8 rounded-full" data-v-78931949> KAKI<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/chenxch" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23251408?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Xc<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/nieyuyao" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/17698194?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Yuyao Nie<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/CarterLi" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6134068?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Carter Li<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/zhangshichun" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15374687?v=4" class="w-8 h-8 rounded-full" data-v-78931949> 张仕春<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/btea" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/24516654?v=4" class="w-8 h-8 rounded-full" data-v-78931949> btea<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/deepthan" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/22695767?v=4" class="w-8 h-8 rounded-full" data-v-78931949> deepthan<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/xiaoxian521" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/44761321?v=4" class="w-8 h-8 rounded-full" data-v-78931949> 啝裳<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/imswk" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23303044?v=4" class="w-8 h-8 rounded-full" data-v-78931949> SongWuKong<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/HaitaoWang555" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/29143658?v=4" class="w-8 h-8 rounded-full" data-v-78931949> wanghaitao<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/gjfei" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/33827314?v=4" class="w-8 h-8 rounded-full" data-v-78931949> gjfei<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/Chris-Kin" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/10802869?v=4" class="w-8 h-8 rounded-full" data-v-78931949> on the field of hope<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/Ryan2128" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/33176053?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Ryan2128<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/zazzaz" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/10731096?v=4" class="w-8 h-8 rounded-full" data-v-78931949> zazzaz<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/Hades-li" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/12124478?v=4" class="w-8 h-8 rounded-full" data-v-78931949> Hades-li<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/liuyutao" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/2098770?v=4" class="w-8 h-8 rounded-full" data-v-78931949> liuyutao<!--]--><!----></a></div><div data-v-78931949><a class="link-item link flex gap-2 items-center link" href="https://github.com/tolking" target="_blank" rel="noopener noreferrer" data-v-78931949 data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23313167?v=4" class="w-8 h-8 rounded-full" data-v-78931949> qiang<!--]--><!----></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://crowdin.com/translate/element-plus/all/en-es" target="_blank" rel="noopener noreferrer" data-v-7d4aa2c8>Editar esta página en Crowdin <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 class="next-and-prev-link" data-v-8ad25866><div class="container" data-v-8ad25866><div class="prev" data-v-8ad25866><a class="link" href="/es-ES/component/skeleton" data-v-8ad25866><i class="el-icon mr-1" style="" data-v-8ad25866><!--[--><svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-8ad25866><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-8ad25866>Skeleton</span></a></div><div class="next" data-v-8ad25866><a class="link" href="/es-ES/component/table-v2" data-v-8ad25866><span class="text" data-v-8ad25866>Virtualized Table</span><i class="el-icon ml-1" style="" data-v-8ad25866><!--[--><svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-8ad25866><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside class="toc-wrapper" data-v-4de21cba><nav class="toc-content" data-v-4de21cba><h3 class="toc-content__heading" data-v-4de21cba>Contents</h3><ul class="toc-items" data-v-4de21cba><!--[--><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-basica" title="Tabla básica" data-v-4de21cba>Tabla básica</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-con-franjas" title="Tabla con franjas" data-v-4de21cba>Tabla con franjas</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-con-bordes" title="Tabla con bordes" data-v-4de21cba>Tabla con bordes</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-con-estados" title="Tabla con estados" data-v-4de21cba>Tabla con estados</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-con-cabecera-fija" title="Tabla con cabecera fija" data-v-4de21cba>Tabla con cabecera fija</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-con-columnas-fijas" title="Tabla con columnas fijas" data-v-4de21cba>Tabla con columnas fijas</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-con-columnas-y-cabecera-fija" title="Tabla con columnas y cabecera fija" data-v-4de21cba>Tabla con columnas y cabecera fija</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-de-altura-fluida-con-cabecera-fija-y-columnas" title="Tabla de altura fluida con cabecera fija (y columnas)" data-v-4de21cba>Tabla de altura fluida con cabecera fija (y columnas)</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#agrupando-cabeceras-de-la-tabla" title="Agrupando cabeceras de la tabla" data-v-4de21cba>Agrupando cabeceras de la tabla</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#seleccion-simple" title="Selección simple" data-v-4de21cba>Selección simple</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#seleccion-multiple" title="Selección multiple" data-v-4de21cba>Selección multiple</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#ordenar" title="Ordenar" data-v-4de21cba>Ordenar</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#filtros" title="Filtros" data-v-4de21cba>Filtros</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#plantilla-de-columna-personalizada" title="Plantilla de columna personalizada" data-v-4de21cba>Plantilla de columna personalizada</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#tabla-con-cabecera-personalizada" title="Tabla con cabecera personalizada" data-v-4de21cba>Tabla con cabecera personalizada</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#filas-expandibles" title="Filas expandibles" data-v-4de21cba>Filas expandibles</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#datos-con-estructura-de-arbol-y-modo-perezoso" title="Datos con estructura de árbol y modo perezoso" data-v-4de21cba>Datos con estructura de árbol y modo perezoso</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#fila-resumen" title="Fila resumen" data-v-4de21cba>Fila resumen</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#rowspan-y-colspan" title="Rowspan y colspan" data-v-4de21cba>Rowspan y colspan</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#indice-personalizado" title="Índice personalizado" data-v-4de21cba>Índice personalizado</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#disposicion-de-la-tabla" title="Disposición de la tabla" data-v-4de21cba>Disposición de la tabla</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#atributos-de-la-tabla" title="Atributos de la tabla" data-v-4de21cba>Atributos de la tabla</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#eventos-de-la-tabla" title="Eventos de la tabla" data-v-4de21cba>Eventos de la tabla</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#metodos-de-la-tabla" title="Métodos de la tabla" data-v-4de21cba>Métodos de la tabla</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#slots-de-la-tabla" title="Slots de la tabla" data-v-4de21cba>Slots de la tabla</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#atributos-para-las-columnas-de-la-tabla" title="Atributos para las columnas de la tabla" data-v-4de21cba>Atributos para las columnas de la tabla</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#slots-de-las-columnas-de-la-tabla" title="Slots de las columnas de la tabla" data-v-4de21cba>Slots de las columnas de la tabla</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#faq" title="FAQ" data-v-4de21cba>FAQ</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#fuente" title="Fuente" data-v-4de21cba>Fuente</a><!----></li><li class="toc-item" data-v-4de21cba><a class="toc-link" href="#contribuidores" title="Contribuidores" data-v-4de21cba>Contribuidores</a><!----></li><!--]--></ul><div class="toc-marker" data-v-4de21cba></div><div class="join sponsors-button mt-4 w-100%" data-v-4de21cba><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button class="el-button" aria-disabled="false" type="button" style="overflow:hidden;"><!--v-if--><span class=""><!--[-->¡Conviértete en un patrocinador!<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div><div class="sponsor-container m-t-16px" data-v-4de21cba><!--[--><a href="https://fantastic-admin.netlify.app/?from=element-plus" title="Fantastic-admin - 开箱即用的 Vue 后台管理框架" target="_blank"><div class="flex bg-#F9F9F9 pl-12px pr-12px pt-16px pb-16px rd-4px"><div class="w-32px m-r-8px h-56px"><img class="mt-2px rd-4px w-32px h-32px" src="/images/sponsors/fantasticadmin.png" alt="Fantastic-admin"></div><div class="flex-1 h-56px"><div class="color-#303133 font-400 text-13px">Fantastic-admin</div><div class="m-t-2px font-400 text-12px color-#909399">An out-of-the-box backend framework</div></div></div></a><!--]--></div></nav></aside></div></main><!----></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"2998fc6a\",\"en-us_component_alert.md\":\"af84be36\",\"en-us_component_avatar.md\":\"401af40b\",\"en-us_component_backtop.md\":\"69b662e6\",\"en-us_component_badge.md\":\"f713f87c\",\"en-us_component_border.md\":\"7a48cff6\",\"en-us_component_breadcrumb.md\":\"b606774a\",\"en-us_component_button.md\":\"55499225\",\"en-us_component_calendar.md\":\"2cbd3d28\",\"en-us_component_card.md\":\"83bdc30e\",\"en-us_component_carousel.md\":\"401e4b70\",\"en-us_component_cascader.md\":\"44af2b71\",\"en-us_component_checkbox.md\":\"f463b7c9\",\"en-us_component_collapse.md\":\"c233a488\",\"en-us_component_color-picker.md\":\"4eb411fc\",\"en-us_component_color.md\":\"c525e42d\",\"en-us_component_config-provider.md\":\"fcbfedbd\",\"en-us_component_container.md\":\"e2590c1e\",\"en-us_component_date-picker.md\":\"f5fc81e1\",\"en-us_component_datetime-picker.md\":\"f14281be\",\"en-us_component_descriptions.md\":\"8af57127\",\"en-us_component_dialog.md\":\"162c2fa3\",\"en-us_component_divider.md\":\"9723f720\",\"en-us_component_drawer.md\":\"24e2e6a3\",\"en-us_component_dropdown.md\":\"1c4a75dc\",\"en-us_component_empty.md\":\"f8c03876\",\"en-us_component_form.md\":\"49359516\",\"en-us_component_icon.md\":\"46a9bffa\",\"en-us_component_image.md\":\"b53057a2\",\"en-us_component_infinite-scroll.md\":\"ac196e44\",\"en-us_component_input-number.md\":\"bf5237b2\",\"en-us_component_input.md\":\"af67af97\",\"en-us_component_layout.md\":\"48ca5815\",\"en-us_component_link.md\":\"da83a879\",\"en-us_component_loading.md\":\"2f8f0441\",\"en-us_component_menu.md\":\"6fc16929\",\"en-us_component_message-box.md\":\"2c85f670\",\"en-us_component_message.md\":\"153b5b42\",\"en-us_component_notification.md\":\"4ce8247a\",\"en-us_component_page-header.md\":\"982b08db\",\"en-us_component_pagination.md\":\"ad7d83c3\",\"en-us_component_popconfirm.md\":\"f66f04a2\",\"en-us_component_popover.md\":\"6bcd194c\",\"en-us_component_progress.md\":\"1cbbdf64\",\"en-us_component_radio.md\":\"2b19d8fb\",\"en-us_component_rate.md\":\"d88cbde8\",\"en-us_component_result.md\":\"5375a6e1\",\"en-us_component_scrollbar.md\":\"3e8a1cc3\",\"en-us_component_select-v2.md\":\"37a53ada\",\"en-us_component_select.md\":\"e3f3b0c8\",\"en-us_component_skeleton.md\":\"61d1b286\",\"en-us_component_slider.md\":\"5f682b34\",\"en-us_component_space.md\":\"616682d2\",\"en-us_component_steps.md\":\"922dc3bc\",\"en-us_component_switch.md\":\"034c6aea\",\"en-us_component_table-v2.md\":\"0d2d934b\",\"en-us_component_table.md\":\"40b11f9f\",\"en-us_component_tabs.md\":\"53af2a01\",\"en-us_component_tag.md\":\"5fbb5809\",\"en-us_component_time-picker.md\":\"f2237d10\",\"en-us_component_time-select.md\":\"1c73b525\",\"en-us_component_timeline.md\":\"8950fc7a\",\"en-us_component_tooltip-v2.md\":\"b56cf7e5\",\"en-us_component_tooltip.md\":\"4590f595\",\"en-us_component_transfer.md\":\"dee6071b\",\"en-us_component_tree-select.md\":\"e04fd572\",\"en-us_component_tree-v2.md\":\"56b2b569\",\"en-us_component_tree.md\":\"8e0a97b9\",\"en-us_component_typography.md\":\"2c98ed57\",\"en-us_component_upload.md\":\"6cb4a210\",\"en-us_guide_changelog.md\":\"c29e2c04\",\"en-us_guide_dark-mode.md\":\"cf4e7eae\",\"en-us_guide_design.md\":\"ee89c6d9\",\"en-us_guide_i18n.md\":\"b09b9a4c\",\"en-us_guide_installation.md\":\"657c8295\",\"en-us_guide_migration.md\":\"3734a6ae\",\"en-us_guide_namespace.md\":\"6b7b7ada\",\"en-us_guide_nav.md\":\"02bb7bfb\",\"en-us_guide_quickstart.md\":\"6c86a471\",\"en-us_guide_theming.md\":\"55c6742d\",\"en-us_guide_transitions.md\":\"e6e7f0b2\",\"en-us_index.md\":\"5afd2188\",\"en-us_resource_index.md\":\"8b727eea\",\"es-es_component_affix.md\":\"e508f22e\",\"es-es_component_alert.md\":\"2d91c59c\",\"es-es_component_avatar.md\":\"fd7aeb82\",\"es-es_component_backtop.md\":\"602b51d0\",\"es-es_component_badge.md\":\"617f4c01\",\"es-es_component_border.md\":\"8deb432b\",\"es-es_component_breadcrumb.md\":\"35688f37\",\"es-es_component_button.md\":\"39c57920\",\"es-es_component_calendar.md\":\"f6f63bd5\",\"es-es_component_card.md\":\"13a92840\",\"es-es_component_carousel.md\":\"edee7a1a\",\"es-es_component_cascader.md\":\"596cd7d7\",\"es-es_component_checkbox.md\":\"c054762c\",\"es-es_component_collapse.md\":\"11823f32\",\"es-es_component_color-picker.md\":\"83623fc5\",\"es-es_component_color.md\":\"4504c240\",\"es-es_component_config-provider.md\":\"a835e879\",\"es-es_component_container.md\":\"35b6094c\",\"es-es_component_date-picker.md\":\"4a8d3069\",\"es-es_component_datetime-picker.md\":\"f928b361\",\"es-es_component_descriptions.md\":\"5d446ff0\",\"es-es_component_dialog.md\":\"97bdc396\",\"es-es_component_divider.md\":\"7ed6ae8f\",\"es-es_component_drawer.md\":\"113a9dae\",\"es-es_component_dropdown.md\":\"0a377917\",\"es-es_component_empty.md\":\"a3ca16cb\",\"es-es_component_form.md\":\"aff131f4\",\"es-es_component_icon.md\":\"94e38781\",\"es-es_component_image.md\":\"05e4e8bf\",\"es-es_component_infinite-scroll.md\":\"a81709ff\",\"es-es_component_input-number.md\":\"b52f26ba\",\"es-es_component_input.md\":\"ec74fe80\",\"es-es_component_layout.md\":\"43517f9f\",\"es-es_component_link.md\":\"9e8d18c7\",\"es-es_component_loading.md\":\"083a5d5b\",\"es-es_component_menu.md\":\"4744082b\",\"es-es_component_message-box.md\":\"fc729e83\",\"es-es_component_message.md\":\"48dcbe70\",\"es-es_component_notification.md\":\"83d0598c\",\"es-es_component_page-header.md\":\"7870a736\",\"es-es_component_pagination.md\":\"ff287df2\",\"es-es_component_popconfirm.md\":\"0247d7ba\",\"es-es_component_popover.md\":\"1bd6bd5e\",\"es-es_component_progress.md\":\"4a702f63\",\"es-es_component_radio.md\":\"0e4e7e78\",\"es-es_component_rate.md\":\"82edd799\",\"es-es_component_result.md\":\"2ec5d806\",\"es-es_component_scrollbar.md\":\"37acb566\",\"es-es_component_select-v2.md\":\"b95c86a3\",\"es-es_component_select.md\":\"692a0233\",\"es-es_component_skeleton.md\":\"f29a9271\",\"es-es_component_slider.md\":\"0c878da8\",\"es-es_component_space.md\":\"8bbbfcd9\",\"es-es_component_steps.md\":\"e3e9b3ce\",\"es-es_component_switch.md\":\"db4dde02\",\"es-es_component_table-v2.md\":\"ed9befe6\",\"es-es_component_table.md\":\"a4277da0\",\"es-es_component_tabs.md\":\"faf5b33b\",\"es-es_component_tag.md\":\"d5ccae18\",\"es-es_component_time-picker.md\":\"3627c1ba\",\"es-es_component_time-select.md\":\"80c900fd\",\"es-es_component_timeline.md\":\"751a1e05\",\"es-es_component_tooltip-v2.md\":\"a7435e7e\",\"es-es_component_tooltip.md\":\"24cb8b86\",\"es-es_component_transfer.md\":\"5560a994\",\"es-es_component_tree-select.md\":\"1332756b\",\"es-es_component_tree-v2.md\":\"c385c71d\",\"es-es_component_tree.md\":\"a5c2eba2\",\"es-es_component_typography.md\":\"7832bf21\",\"es-es_component_upload.md\":\"78099d78\",\"es-es_guide_changelog.md\":\"c3f5d29f\",\"es-es_guide_dark-mode.md\":\"e4290bea\",\"es-es_guide_design.md\":\"73843374\",\"es-es_guide_i18n.md\":\"f6c1b6ea\",\"es-es_guide_installation.md\":\"4d612a3b\",\"es-es_guide_migration.md\":\"857d3334\",\"es-es_guide_namespace.md\":\"9a20c0c2\",\"es-es_guide_nav.md\":\"2f8fc44b\",\"es-es_guide_quickstart.md\":\"e992e574\",\"es-es_guide_theming.md\":\"7dcfaaad\",\"es-es_guide_transitions.md\":\"1f979a7d\",\"es-es_index.md\":\"23a68570\",\"es-es_resource_index.md\":\"47f5e96b\",\"index.md\":\"9cf97991\",\"zh-cn_component_affix.md\":\"a345625f\",\"zh-cn_component_alert.md\":\"11460429\",\"zh-cn_component_avatar.md\":\"ee3b5820\",\"zh-cn_component_backtop.md\":\"c6ddbc5d\",\"zh-cn_component_badge.md\":\"94fa52d3\",\"zh-cn_component_border.md\":\"40b6f67b\",\"zh-cn_component_breadcrumb.md\":\"d6728a65\",\"zh-cn_component_button.md\":\"42c57fe9\",\"zh-cn_component_calendar.md\":\"32602b89\",\"zh-cn_component_card.md\":\"e71cd2ff\",\"zh-cn_component_carousel.md\":\"4fdb03d2\",\"zh-cn_component_cascader.md\":\"0de13bb9\",\"zh-cn_component_checkbox.md\":\"0fb68724\",\"zh-cn_component_collapse.md\":\"8eec6dcf\",\"zh-cn_component_color-picker.md\":\"52290087\",\"zh-cn_component_color.md\":\"6c2cfef7\",\"zh-cn_component_config-provider.md\":\"6d0b70ed\",\"zh-cn_component_container.md\":\"08fd66d6\",\"zh-cn_component_date-picker.md\":\"d01ea1fa\",\"zh-cn_component_datetime-picker.md\":\"4c88f7c2\",\"zh-cn_component_descriptions.md\":\"09722332\",\"zh-cn_component_dialog.md\":\"c7f3313a\",\"zh-cn_component_divider.md\":\"dfbd212b\",\"zh-cn_component_drawer.md\":\"af7533b9\",\"zh-cn_component_dropdown.md\":\"2e69851f\",\"zh-cn_component_empty.md\":\"e5fd4476\",\"zh-cn_component_form.md\":\"bc94ba76\",\"zh-cn_component_icon.md\":\"243b5730\",\"zh-cn_component_image.md\":\"9eef4050\",\"zh-cn_component_infinite-scroll.md\":\"5e1b0e99\",\"zh-cn_component_input-number.md\":\"586f770f\",\"zh-cn_component_input.md\":\"b5a54d81\",\"zh-cn_component_layout.md\":\"68614058\",\"zh-cn_component_link.md\":\"93623b30\",\"zh-cn_component_loading.md\":\"5d9af882\",\"zh-cn_component_menu.md\":\"706acd25\",\"zh-cn_component_message-box.md\":\"6804d19b\",\"zh-cn_component_message.md\":\"116daaed\",\"zh-cn_component_notification.md\":\"89b46889\",\"zh-cn_component_page-header.md\":\"549d12d1\",\"zh-cn_component_pagination.md\":\"dcc174bb\",\"zh-cn_component_popconfirm.md\":\"d76f3ae0\",\"zh-cn_component_popover.md\":\"3f140577\",\"zh-cn_component_progress.md\":\"a4a60c52\",\"zh-cn_component_radio.md\":\"7ed27fd0\",\"zh-cn_component_rate.md\":\"5daf43a4\",\"zh-cn_component_result.md\":\"f5733567\",\"zh-cn_component_scrollbar.md\":\"422ecc49\",\"zh-cn_component_select-v2.md\":\"aadda181\",\"zh-cn_component_select.md\":\"6ae94e85\",\"zh-cn_component_skeleton.md\":\"b395b3cc\",\"zh-cn_component_slider.md\":\"71ff7032\",\"zh-cn_component_space.md\":\"04c9b832\",\"zh-cn_component_steps.md\":\"e4c2d77f\",\"zh-cn_component_switch.md\":\"c7c0e0a5\",\"zh-cn_component_table-v2.md\":\"565c35ef\",\"zh-cn_component_table.md\":\"ac8c5743\",\"zh-cn_component_tabs.md\":\"8c0869f6\",\"zh-cn_component_tag.md\":\"9b1375ee\",\"zh-cn_component_time-picker.md\":\"460e73a8\",\"zh-cn_component_time-select.md\":\"d18eba19\",\"zh-cn_component_timeline.md\":\"bd8e5b75\",\"zh-cn_component_tooltip-v2.md\":\"9441b983\",\"zh-cn_component_tooltip.md\":\"3d81c445\",\"zh-cn_component_transfer.md\":\"54717b05\",\"zh-cn_component_tree-select.md\":\"6d28e483\",\"zh-cn_component_tree-v2.md\":\"f352afd0\",\"zh-cn_component_tree.md\":\"8f5cbdd7\",\"zh-cn_component_typography.md\":\"ccecdc7c\",\"zh-cn_component_upload.md\":\"296d4413\",\"zh-cn_guide_changelog.md\":\"ec54619d\",\"zh-cn_guide_dark-mode.md\":\"be825ca2\",\"zh-cn_guide_design.md\":\"350f5483\",\"zh-cn_guide_i18n.md\":\"59746805\",\"zh-cn_guide_installation.md\":\"3acfa5cd\",\"zh-cn_guide_migration.md\":\"f2160d5b\",\"zh-cn_guide_namespace.md\":\"beae41d5\",\"zh-cn_guide_nav.md\":\"b0f20760\",\"zh-cn_guide_quickstart.md\":\"d233ca4b\",\"zh-cn_guide_theming.md\":\"4a9e849c\",\"zh-cn_guide_transitions.md\":\"ddedf4b8\",\"zh-cn_index.md\":\"ed541c72\",\"zh-cn_resource_index.md\":\"7dcf463d\"}")</script>
<script type="module" async src="/assets/app.f4abc348.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink