lc-vue-pro-table

Version:

vue3高级表格

91 lines • 75.7 kB

HTML

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>lc-vue-pro-table | lc-vue-pro-table-1.3.0</title> <meta name="description" content="vue3高级表格"> <link rel="preload stylesheet" href="/lc-vue-pro-table@1.3.0/docs/.vitepress/dist/assets/style.549fb5ac.css" as="style"> <script type="module" src="/lc-vue-pro-table@1.3.0/docs/.vitepress/dist/assets/app.f7662b8a.js"></script> <link rel="preload" href="/lc-vue-pro-table@1.3.0/docs/.vitepress/dist/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin=""> <link rel="modulepreload" href="/lc-vue-pro-table@1.3.0/docs/.vitepress/dist/assets/chunks/framework.e6a86ff9.js"> <link rel="modulepreload" href="/lc-vue-pro-table@1.3.0/docs/.vitepress/dist/assets/chunks/theme.98798b29.js"> <link rel="modulepreload" href="/lc-vue-pro-table@1.3.0/docs/.vitepress/dist/assets/index.md.ba21cd07.lean.js"> <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> </head> <body> <div id="app"><div class="Layout" data-v-b2cf3e0b><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><header class="VPNav" data-v-b2cf3e0b data-v-7e5bc4a5><div class="VPNavBar" data-v-7e5bc4a5 data-v-94c81dcc><div class="container" data-v-94c81dcc><div class="title" data-v-94c81dcc><div class="VPNavBarTitle" data-v-94c81dcc data-v-f4ef19a3><a class="title" href="/lc-vue-pro-table@1.3.0/docs/.vitepress/dist/" data-v-f4ef19a3>lc-vue-pro-table-1.3.0</a></div></div><div class="content" data-v-94c81dcc><div class="curtain" data-v-94c81dcc></div><div class="content-body" data-v-94c81dcc><div class="VPNavBarSearch search" style="--vp-meta-key:'Meta';" data-v-94c81dcc></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-94c81dcc data-v-7f418b0f>Main Navigation<a class="VPLink link VPNavBarMenuLink" href="/lc-vue-pro-table@1.3.0/docs/.vitepress/dist/ag.html" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553>ag</a></nav><div class="VPNavBarAppearance appearance" data-v-94c81dcc data-v-f6a63727><label title="toggle dark mode" data-v-f6a63727 data-v-a9c8afb8><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-a9c8afb8 data-v-f3c41672><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-a9c8afb8><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-a9c8afb8><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></button></label></div><div class="VPFlyout VPNavBarExtra extra" data-v-94c81dcc data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84>Appearance<div class="appearance-action" data-v-40855f84><label title="toggle dark mode" data-v-40855f84 data-v-a9c8afb8><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-a9c8afb8 data-v-f3c41672><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-a9c8afb8><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-a9c8afb8><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></button></label></div></div></div></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-94c81dcc data-v-e5dd9c1c></button></div></div></div></div></header><div class="VPLocalNav" data-v-b2cf3e0b data-v-59bd7401><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-59bd7401 data-v-079b16a8><button data-v-079b16a8>Return to top</button></div></div><div class="VPContent" id="VPContent" data-v-b2cf3e0b data-v-a494bd1d><div class="VPDoc has-aside" data-v-a494bd1d data-v-c4b0d3cf><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page <ul class="root" data-v-ff0f39c8 data-v-9a431c33></ul></nav></div></div><div class="spacer" data-v-3f215769></div></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _lc-vue-pro-table@1_3_0_docs_vitepress_dist_index" data-v-c4b0d3cf><div><h1 id="lc-vue-pro-table" tabindex="-1">lc-vue-pro-table <a class="header-anchor" href="#lc-vue-pro-table" aria-label="Permalink to "lc-vue-pro-table""></a></h1>高级表格组件基于vue3 + element-plus el-table 开发<ul><li>新增跨页多选/跨页全选反选功能</li><li>新增自定义列功能（新增/删除/排序）</li></ul><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-"><button title="Copy Code" class="copy"></button><pre class="shiki material-theme-palenight"><code>npm i lc-vue-pro-table</code></pre></div><h2 id="基本使用" tabindex="-1">基本使用 <a class="header-anchor" href="#基本使用" aria-label="Permalink to "基本使用""></a></h2><div class="reset"><div><button ariadisabled="false" type="button" class="el-button" style="">clearSort</button></div><div><button ariadisabled="false" type="button" class="el-button" style=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357.12 357.12 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a351.616 351.616 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357.12 357.12 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294.113 294.113 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293.12 293.12 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294.113 294.113 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288.282 288.282 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293.12 293.12 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a287.616 287.616 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384zm0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256z"></path></svg></button></div><div class="hidden" data-v-fa077230><div></div><div></div><div></div><div></div></div><div class="pro-table" data-v-fa077230><div class="section-alert" data-v-fa077230></div></div></div><div class="language-vue"><button title="Copy Code" class="copy"></button>vue<pre class="shiki material-theme-palenight"><code><template> <div class="reset"> <div> <CustomColumnPop ref="customColumnPopRef" @submit="onSubmit"> <template #reference> <el-button :icon="Setting" @click="onSetting"/> </template> </CustomColumnPop> </div> <ProTable :data="data" ref="proTableRef" rowKey="id"> <ProTableColumn type="selection" label="选择" prop="selection"> </ProTableColumn> <ProTableColumn type="reserveSelection" label="跨页选择" prop="reserveSelection"> </ProTableColumn> <ProTableColumn type="index" label="c" prop="c"></ProTableColumn> <ProTableColumn prop="a" label="aa"></ProTableColumn> <ProTableColumn prop="b" label="bb" disabled> <template #default="{row}">{{ row }}</template> </ProTableColumn> </ProTable> </div> </template> <script setup lang="ts"> import { ProTable, ProTableColumn, CustomColumnPop } from 'lc-vue-pro-table'; import { Setting } from '@element-plus/icons'; import { ref } from 'vue'; const data = ref([{ id: 1, a:10, b:11 }, { id:2, a:20, b:22 }]) const customColumnPopRef = ref(); const proTableRef = ref(); const onSetting = ()=>{ const columns = proTableRef.value.getCustomColumns() customColumnPopRef.value.show(columns) } const onSubmit = (list)=>{ proTableRef.value.updateCustomColumns(list) } </script> <style scoped> </style></code></pre></div><h2 id="翻页场景" tabindex="-1">翻页场景 <a class="header-anchor" href="#翻页场景" aria-label="Permalink to "翻页场景""></a></h2><div><label class="el-checkbox is-checked"><input class="el-checkbox__original" type="checkbox" aria-hidden="false" value="false" checked>showSelectionAlert</label><label class="el-checkbox is-checked"><input class="el-checkbox__original" type="checkbox" aria-hidden="false" value="false" checked>reserveSelection</label></div><div><button ariadisabled="false" type="button" class="el-button" style=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357.12 357.12 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a351.616 351.616 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357.12 357.12 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294.113 294.113 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293.12 293.12 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294.113 294.113 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288.282 288.282 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293.12 293.12 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a287.616 287.616 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384zm0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256z"></path></svg></button></div><div style="height:600px;" class="reset"><div class="auto-pagination" data-v-e9dd1a97><div class="auto-pagination_data-container" data-v-e9dd1a97><div class="auto-height-table-wrapper" data-v-259fff06><div class="hidden" data-v-fa077230><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class="pro-table" data-v-fa077230><div class="section-alert" data-v-fa077230><div class="section-alert" data-v-fa077230 data-v-8910441d> 已选择 0 条 </div></div></div></div></div><div class="auto-pagination_main" data-v-e9dd1a97><div class="el-pagination is-background el-pagination--small" data-v-e9dd1a97>Total 0<div class="el-select el-select--small"><div class="select-trigger el-tooltip__trigger el-tooltip__trigger"><div class="el-input el-input--small el-input--suffix" style=""><div class="el-input__wrapper"><input class="el-input__inner" type="text" readonly autocomplete="off" tabindex="0" placeholder="Select" style=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path></svg></div></div></div></div><button type="button" class="btn-prev" disabled aria-label="Go to previous page" aria-disabled="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><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></button><ul class="el-pager"><li class="is-active number" aria-current="true" aria-label="page 1" tabindex="0"> 1 </li></ul><button type="button" class="btn-next is-last" disabled aria-label="Go to next page" aria-disabled="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><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></button></div></div></div></div><div><button ariadisabled="false" type="button" class="el-button" style="">获取选择记录</button></div><div class="language-vue"><button title="Copy Code" class="copy"></button>vue<pre class="shiki material-theme-palenight"><code><template> <div> <el-checkbox v-model="showSelectionAlert">showSelectionAlert</el-checkbox> </div> <div> <CustomColumnPop ref="customColumnPopRef" @submit="onSubmit"> <template #reference> <el-button :icon="Setting" @click="onSetting"/> </template> </CustomColumnPop> </div> <div style="height: 600px;" class="reset"> <AutoPagination :fetch-data="fetchData" ref="pagination" auto-init> <template #default="{data, indexMethod}"> <AutoHeightWrapper> <template #default="{size}"> <ProTable :data="data" rowKey="id" :height="size.height" :showSelectionAlert="showSelectionAlert" ref="tableRef"> <ProTableColumn type="selection" label="选择" prop="selection"> </ProTableColumn> <ProTableColumn type="reserveSelection" label="跨页选择" prop="reserveSelection"> </ProTableColumn> <ProTableColumn type="index" label="c" prop="c"></ProTableColumn> <ProTableColumn prop="id" label="id"></ProTableColumn> <ProTableColumn prop="b" label="bb" disabled> <template #default="{row}"><span style="color: