perf: pure-table表格高级用法添加保留已选中的CheckBox选项demo

src/views/pure-table/high/page/columns.tsx

@@ -6,11 +6,18 @@ import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";
 export function useColumns() {
   const dataList = ref([]);
   const loading = ref(true);
+  const select = ref("no");
   const hideVal = ref("nohide");
   const tableSize = ref("default");
   const paginationSmall = ref(false);
   const paginationAlign = ref("right");
   const columns: TableColumnList = [
+    {
+      type: "selection",
+      align: "left",
+      reserveSelection: true,
+      hide: () => (select.value === "no" ? true : false)
+    },
     {
       label: "日期",
       prop: "date",
@@ -83,7 +90,9 @@ export function useColumns() {
       Array.from({ length: 6 }).forEach(() => {
         newList.push(clone(tableData, true));
       });
-      dataList.value = newList.flat(Infinity);
+      newList.flat(Infinity).forEach((item, index) => {
+        dataList.value.push({ id: index, ...item });
+      });
       pagination.total = dataList.value.length;
       loading.value = false;
     });
@@ -93,6 +102,7 @@ export function useColumns() {
     loading,
     columns,
     dataList,
+    select,
     hideVal,
     tableSize,
     pagination,

src/views/pure-table/high/page/index.vue

@@ -5,6 +5,7 @@ const {
   loading,
   columns,
   dataList,
+  select,
   hideVal,
   tableSize,
   pagination,
@@ -20,6 +21,12 @@ const {
 <template>
   <div>
     <el-space class="float-right mb-4">
+      <p class="text-sm">多选：</p>
+      <el-radio-group v-model="select" size="small">
+        <el-radio-button label="yes">是</el-radio-button>
+        <el-radio-button label="no">否</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
       <p class="text-sm">动态列：</p>
       <el-radio-group v-model="hideVal" size="small">
         <el-radio-button label="nohide">不隐藏</el-radio-button>