@neatui/vue 2.7.1 → 2.7.2

package/src/components/loader/TableLoader@v3/TableLoader@v3.vue

@@ -0,0 +1,636 @@
+<template>
+  <div class="pr">
+    <div class="full tableloader" style="overflow: auto; position: relative">
+      <table class="full-x" ui-table="@b line sz:l" ref="tableRef">
+        <thead class="table-head-fixed">
+          <tr>
+            <th v-if="selected" col-fixed="1" min-width>
+              <el-checkbox v-model="all" :indeterminate="!all && isHasSelect ? true : false" v-bind="selected"></el-checkbox>
+            </th>
+            <template v-for="(col, idx) in state.table" :key="idx">
+              <th
+                v-if="!col._close"
+                class="pr fs-xs nowrap"
+                :min-width="col.fixed"
+                :col-fixed="col.fixed"
+                :col-fixed-side="col.fixed || 'l'"
+                :data-field="col.field"
+              >
+              <div
+                :ui-flex="col.label[1] && col.label[1]['ui-flex'] ? col.label[1]['ui-flex'] : !slots.operate && idx === state._last ? 'row rm' : null"
+                v-bind="col.label[1]"
+                v-on="event(col.label[2], col)"
+              >
+                <span class="nl-xs" v-if="col.sort" ui-flex="row lm">
+                  <span v-html="col.label[0]"></span>
+                  <span class="co-main dib w-xs h-xs nl-ss" ui-flex="row lm" @click.stop="onsort(col)">
+                    <span :ui-sort="col._sort || 0"></span>
+                  </span>
+                </span>
+                <span class="nl-xs" v-else v-html="col.label[0]"></span>
+                <IFollowView v-if="operate && tools && !slots.operate && idx === state._last" tipBoxClass="n-no">
+                  <svg t="1712827525722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" style="width: 1em; height: 1em">
+                    <path
+                      d="M512 998.4c-22.4 0-44.8-3.2-67.2-6.4-35.2-6.4-67.2-32-76.8-64-16-54.4-64-89.6-121.6-89.6-9.6 0-19.2 0-28.8 3.2-6.4 0-12.8 3.2-19.2 3.2-28.8 0-54.4-12.8-73.6-35.2-25.6-35.2-51.2-73.6-67.2-115.2-12.8-35.2-6.4-73.6 19.2-99.2 44.8-48 44.8-121.6 0-172.8-25.6-25.6-32-64-19.2-99.2 19.2-38.4 41.6-76.8 70.4-112 19.2-22.4 44.8-35.2 73.6-35.2 6.4 0 12.8 0 19.2 3.2 9.6 3.2 19.2 3.2 28.8 3.2 54.4 0 102.4-35.2 118.4-89.6 9.6-35.2 41.6-60.8 76.8-64 22.4-3.2 44.8-3.2 67.2-3.2 22.4 0 44.8 0 67.2 3.2 35.2 6.4 67.2 32 76.8 64 9.6 32 28.8 57.6 57.6 70.4 19.2 9.6 41.6 16 64 16 9.6 0 19.2 0 28.8-3.2 6.4 0 12.8-3.2 19.2-3.2 28.8 0 54.4 12.8 73.6 35.2 25.6 35.2 48 76.8 67.2 118.4 12.8 32 6.4 73.6-19.2 99.2-44.8 48-44.8 121.6 0 172.8 25.6 25.6 32 64 19.2 99.2-16 41.6-38.4 80-67.2 115.2-19.2 22.4-44.8 35.2-73.6 35.2-6.4 0-12.8 0-19.2-3.2-9.6-3.2-19.2-3.2-28.8-3.2-54.4 0-102.4 35.2-118.4 89.6-9.6 35.2-41.6 60.8-76.8 64-25.6 3.2-48 3.2-70.4 3.2z m-265.6-236.8c89.6 0 169.6 57.6 198.4 144 3.2 6.4 6.4 9.6 12.8 9.6 19.2 3.2 35.2 3.2 54.4 3.2 12.8 0 25.6 0 38.4-3.2h22.4c6.4-3.2 9.6-6.4 9.6-9.6 16-51.2 48-92.8 92.8-115.2 32-19.2 67.2-25.6 102.4-25.6 16 0 32 3.2 44.8 6.4h3.2c3.2 0 9.6-3.2 12.8-3.2 22.4-28.8 41.6-60.8 57.6-96 3.2-6.4 0-12.8-3.2-16-70.4-80-70.4-198.4 0-275.2 3.2-6.4 3.2-12.8 3.2-19.2-12.8-35.2-32-67.2-57.6-96-6.4-6.4-9.6-9.6-12.8-9.6h-3.2c-16 3.2-28.8 6.4-44.8 6.4-35.2 0-70.4-9.6-102.4-25.6-44.8-25.6-76.8-67.2-92.8-115.2 0-6.4-6.4-9.6-9.6-9.6-19.2-3.2-38.4-3.2-57.6-3.2s-38.4 0-57.6 3.2c-6.4 3.2-9.6 6.4-9.6 9.6-16 51.2-48 92.8-92.8 115.2-32 19.2-67.2 25.6-102.4 25.6-16 0-32-3.2-44.8-6.4h-3.2c-9.6 3.2-12.8 3.2-16 6.4-22.4 28.8-41.6 60.8-57.6 96-3.2 6.4 0 12.8 3.2 16 70.4 80 70.4 198.4 0 275.2-3.2 3.2-3.2 9.6-3.2 16 12.8 35.2 32 67.2 54.4 96 3.2 3.2 9.6 6.4 16 6.4 12.8-3.2 28.8-6.4 44.8-6.4z m256-67.2c-48 0-92.8-19.2-128-54.4S320 560 320 512c0-99.2 83.2-182.4 182.4-182.4 102.4 0 182.4 83.2 182.4 182.4 0 102.4-80 182.4-182.4 182.4z m0-284.8c-57.6 0-102.4 48-102.4 105.6 0 57.6 48 105.6 105.6 105.6 57.6 0 105.6-48 102.4-105.6 0-60.8-48-105.6-105.6-105.6v-3.2 3.2z"
+                      p-id="2970"
+                    ></path>
+                  </svg>
+                  <template v-slot:tips>
+                    <div class="w-mm h-ml n-sl ar fw4" ui-scroll="x:hidden :y">
+                      <draggable
+                        class="al"
+                        v-model="state.table"
+                        :force-fallback="true"
+                        item-key="name"
+                        chosen-class="chosen"
+                        animation="200"
+                        filter=".forbid"
+                        :move="(e) => !e.relatedContext.element.fixed"
+                      >
+                        <div v-for="(element, idx) in state.table" :key="idx" ui-flex="row lm" class="ux-hover n-ss r-ss">
+                          <label ui-form="@a type:checkbox" :class="`flex-block nowrap ${element.fixed ? 'forbid' : 'element'}`">
+                            <input type="checkbox" :checked="!element._close" @change="fCloseItem(element)" />
+                            <span>
+                              {{ element.label[0] }}
+                            </span>
+                          </label>
+                          <svg
+                            v-if="element.fixed"
+                            t="1712839748050"
+                            class="icon"
+                            viewBox="0 0 1024 1024"
+                            version="1.1"
+                            xmlns="http://www.w3.org/2000/svg"
+                            p-id="56355"
+                            style="width: 1em; height: 1em"
+                          >
+                            <path
+                              d="M348.16 192c135.296 0 265.536 75.84 334.08 191.552h278.144a64 64 0 0 1 63.552 56.576l0.448 7.872-1.088 190.08a64 64 0 0 1-64 63.68L704 703.36v0.192h-24.448c-69.12 115.456-196.608 191.808-331.392 191.808a27.52 27.52 0 0 1-27.52-27.52l0.96-292.288H32a32 32 0 0 1 0-64h289.792l0.128-54.208c0-80.32-0.256-160.512-1.28-237.568A27.392 27.392 0 0 1 348.16 192z m36.928 66.304l0.768 128.768-1.088 442.048c97.088-12.16 187.84-71.424 239.808-158.336l15.424-25.856V437.888l-12.864-21.76a332.608 332.608 0 0 0-242.048-157.824zM704 639.36l255.296-1.664 1.088-190.208L704 447.488v191.936z"
+                              fill="#7D8292"
+                              p-id="56356"
+                            ></path>
+                          </svg>
+                        </div>
+                      </draggable>
+                    </div>
+                  </template>
+                </IFollowView>
+              </div>
+            </th>
+            <th v-if="operate && slots.operate" col-fixed="r" class="fs-xs nowrap ar">
+              <div ui-flex="row rm">
+                <span class="mr-sm">{{ words['operate'] || '操作' }}</span>
+                <IFollowView v-if="tools" tipBoxClass="n-no">
+                  <svg t="1712827525722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" style="width: 1em; height: 1em">
+                    <path
+                      d="M512 998.4c-22.4 0-44.8-3.2-67.2-6.4-35.2-6.4-67.2-32-76.8-64-16-54.4-64-89.6-121.6-89.6-9.6 0-19.2 0-28.8 3.2-6.4 0-12.8 3.2-19.2 3.2-28.8 0-54.4-12.8-73.6-35.2-25.6-35.2-51.2-73.6-67.2-115.2-12.8-35.2-6.4-73.6 19.2-99.2 44.8-48 44.8-121.6 0-172.8-25.6-25.6-32-64-19.2-99.2 19.2-38.4 41.6-76.8 70.4-112 19.2-22.4 44.8-35.2 73.6-35.2 6.4 0 12.8 0 19.2 3.2 9.6 3.2 19.2 3.2 28.8 3.2 54.4 0 102.4-35.2 118.4-89.6 9.6-35.2 41.6-60.8 76.8-64 22.4-3.2 44.8-3.2 67.2-3.2 22.4 0 44.8 0 67.2 3.2 35.2 6.4 67.2 32 76.8 64 9.6 32 28.8 57.6 57.6 70.4 19.2 9.6 41.6 16 64 16 9.6 0 19.2 0 28.8-3.2 6.4 0 12.8-3.2 19.2-3.2 28.8 0 54.4 12.8 73.6 35.2 25.6 35.2 48 76.8 67.2 118.4 12.8 32 6.4 73.6-19.2 99.2-44.8 48-44.8 121.6 0 172.8 25.6 25.6 32 64 19.2 99.2-16 41.6-38.4 80-67.2 115.2-19.2 22.4-44.8 35.2-73.6 35.2-6.4 0-12.8 0-19.2-3.2-9.6-3.2-19.2-3.2-28.8-3.2-54.4 0-102.4 35.2-118.4 89.6-9.6 35.2-41.6 60.8-76.8 64-25.6 3.2-48 3.2-70.4 3.2z m-265.6-236.8c89.6 0 169.6 57.6 198.4 144 3.2 6.4 6.4 9.6 12.8 9.6 19.2 3.2 35.2 3.2 54.4 3.2 12.8 0 25.6 0 38.4-3.2h22.4c6.4-3.2 9.6-6.4 9.6-9.6 16-51.2 48-92.8 92.8-115.2 32-19.2 67.2-25.6 102.4-25.6 16 0 32 3.2 44.8 6.4h3.2c3.2 0 9.6-3.2 12.8-3.2 22.4-28.8 41.6-60.8 57.6-96 3.2-6.4 0-12.8-3.2-16-70.4-80-70.4-198.4 0-275.2 3.2-6.4 3.2-12.8 3.2-19.2-12.8-35.2-32-67.2-57.6-96-6.4-6.4-9.6-9.6-12.8-9.6h-3.2c-16 3.2-28.8 6.4-44.8 6.4-35.2 0-70.4-9.6-102.4-25.6-44.8-25.6-76.8-67.2-92.8-115.2 0-6.4-6.4-9.6-9.6-9.6-19.2-3.2-38.4-3.2-57.6-3.2s-38.4 0-57.6 3.2c-6.4 3.2-9.6 6.4-9.6 9.6-16 51.2-48 92.8-92.8 115.2-32 19.2-67.2 25.6-102.4 25.6-16 0-32-3.2-44.8-6.4h-3.2c-9.6 3.2-12.8 3.2-16 6.4-22.4 28.8-41.6 60.8-57.6 96-3.2 6.4 0 12.8 3.2 16 70.4 80 70.4 198.4 0 275.2-3.2 3.2-3.2 9.6-3.2 16 12.8 35.2 32 67.2 54.4 96 3.2 3.2 9.6 6.4 16 6.4 12.8-3.2 28.8-6.4 44.8-6.4z m256-67.2c-48 0-92.8-19.2-128-54.4S320 560 320 512c0-99.2 83.2-182.4 182.4-182.4 102.4 0 182.4 83.2 182.4 182.4 0 102.4-80 182.4-182.4 182.4z m0-284.8c-57.6 0-102.4 48-102.4 105.6 0 57.6 48 105.6 105.6 105.6 57.6 0 105.6-48 102.4-105.6 0-60.8-48-105.6-105.6-105.6v-3.2 3.2z"
+                      p-id="2970"
+                    ></path>
+                  </svg>
+                  <template v-slot:tips>
+                    <div class="w-mm h-ml n-sl ar fw4" ui-scroll="x:hidden :y">
+                      <draggable
+                        class="al"
+                        v-model="state.table"
+                        :force-fallback="true"
+                        item-key="name"
+                        chosen-class="chosen"
+                        animation="200"
+                        filter=".forbid"
+                        :move="(e) => !e.relatedContext.element.fixed"
+                      >
+                        <div v-for="(element, idx) in state.table" :key="idx" ui-flex="row lm" class="ux-hover n-ss r-ss">
+                          <label ui-form="@a type:checkbox" :class="`flex-block nowrap ${element.fixed ? 'forbid' : 'element'}`">
+                            <input type="checkbox" :checked="!element._close" @change="fCloseItem(element)" />
+                            <span>
+                              {{ element.label[0] }}
+                            </span>
+                          </label>
+                          <svg
+                            v-if="element.fixed"
+                            t="1712839748050"
+                            class="icon"
+                            viewBox="0 0 1024 1024"
+                            version="1.1"
+                            xmlns="http://www.w3.org/2000/svg"
+                            p-id="56355"
+                            style="width: 1em; height: 1em"
+                          >
+                            <path
+                              d="M348.16 192c135.296 0 265.536 75.84 334.08 191.552h278.144a64 64 0 0 1 63.552 56.576l0.448 7.872-1.088 190.08a64 64 0 0 1-64 63.68L704 703.36v0.192h-24.448c-69.12 115.456-196.608 191.808-331.392 191.808a27.52 27.52 0 0 1-27.52-27.52l0.96-292.288H32a32 32 0 0 1 0-64h289.792l0.128-54.208c0-80.32-0.256-160.512-1.28-237.568A27.392 27.392 0 0 1 348.16 192z m36.928 66.304l0.768 128.768-1.088 442.048c97.088-12.16 187.84-71.424 239.808-158.336l15.424-25.856V437.888l-12.864-21.76a332.608 332.608 0 0 0-242.048-157.824zM704 639.36l255.296-1.664 1.088-190.208L704 447.488v191.936z"
+                              fill="#7D8292"
+                              p-id="56356"
+                            ></path>
+                          </svg>
+                        </div>
+                      </draggable>
+                    </div>
+                  </template>
+                </IFollowView>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody :ui-tbody-load="state.load" v-if="$lists.length">
+          <tr
+            v-for="(item, idx) in $lists"
+            :key="idx + '_' + item._id"
+            v-bind="isFunction(props.rows.attrs) ? props.rows.attrs(item, idx, $lists) : props.rows.attrs"
+            v-on="event(props.rows.event, item, 'td')"
+          >
+            <td v-if="selected" col-fixed="1" min-width>
+              <el-checkbox v-model="$lists[idx].__selected" v-bind="selected"></el-checkbox>
+            </td>
+            <td
+              v-for="(col, idx) in state.table"
+              :key="idx"
+              v-if="!col._close"
+              :class="`${!slots.operate && idx === state._last && !slots.operate ? 'ar' : ''}`"
+              :min-width="col.fixed"
+              :col-fixed="col.fixed"
+              :col-fixed-side="col.fixed || 'l'"
+              :data-field="col.field"
+            >
+              <slot v-if="operate && slots[col.field]" :name="col.field" :data="item" :note="col"></slot>
+              <TableColView v-else :col="col" :data="item" />
+            </td>
+            <td v-if="operate && slots.operate" col-fixed="r" class="ar">
+              <slot name="operate" :item="item" :idx="idx"></slot>
+            </td>
+          </tr>
+        </tbody>
+        <tbody v-else-if="!load">
+          <tr>
+            <td :colspan="cols" class="ac ny-ls">
+              <p class="lh-xs o-sm">
+                <svg t="1721803279190" class="icon w-ss h-ss" viewBox="0 0 1203 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10075" width="128" height="128">
+                  <path
+                    d="M109.985185 984.809877c-39.190123 0-72.059259-31.604938-72.059259-70.795062V620.720988L211.120988 366.617284c15.17037-22.755556 41.718519-36.661728 68.266666-36.661728h632.098766c27.812346 0 53.096296 13.906173 68.266666 36.661728l171.930865 254.103704 1.264197 293.293827c0 39.190123-31.604938 70.795062-72.059259 70.795062H109.985185z m-48.039506-107.456791c0 59.417284 10.11358 83.437037 72.059259 83.437037h911.48642c60.681481 0 82.17284-20.22716 84.701235-77.116049V648.533333h-3.792593l-1.264198 1.264198h-50.567901l-297.08642 1.264197c-11.377778 0-20.22716 8.849383-20.22716 18.962963v11.377778c-6.320988 73.323457-73.323457 126.419753-161.817284 126.419753-72.059259 0-154.232099-49.303704-161.817284-127.68395v-11.377778c0-11.377778-8.849383-20.22716-20.22716-20.227161H61.945679v228.819753z m217.441975-520.849382c-18.962963 0-36.661728 8.849383-46.775308 25.28395L67.002469 624.51358h379.259259c3.792593 0 7.585185 3.792593 7.585186 7.585185v11.377778c0 78.380247 64.474074 141.590123 142.854321 141.590124 78.380247 0 142.854321-63.209877 142.854321-141.590124v-12.641975c0-2.528395 2.528395-6.320988 5.05679-6.320988H1125.135802L959.525926 381.787654c-10.11358-15.17037-27.812346-25.283951-46.775309-25.28395H279.387654z m541.076544-126.419753c-3.792593 0-7.585185-1.264198-10.113581-3.792593-2.528395-2.528395-5.05679-6.320988-5.05679-10.11358 0-3.792593 1.264198-7.585185 3.792593-10.11358l88.493827-88.493828c2.528395-2.528395 6.320988-3.792593 10.11358-3.792592 3.792593 0 8.849383 1.264198 11.377778 5.05679 5.05679 6.320988 5.05679 15.17037 0 20.22716l-87.22963 85.965432c-2.528395 3.792593-6.320988 5.05679-11.377777 5.056791z m-450.054321 0c-3.792593 0-7.585185-1.264198-10.113581-3.792593L273.066667 139.061728c-3.792593-2.528395-5.05679-6.320988-5.05679-11.377777s1.264198-7.585185 3.792592-11.377778c2.528395-3.792593 7.585185-5.05679 11.377778-5.05679 3.792593 0 7.585185 1.264198 10.11358 3.792592l88.493827 88.493827c6.320988 6.320988 6.320988 15.17037 0 21.491358-2.528395 2.528395-6.320988 5.05679-11.377777 5.056791z m225.02716-30.340741c-8.849383 0-15.17037-6.320988-15.17037-15.17037V54.360494c0-8.849383 6.320988-15.17037 15.17037-15.170371s15.17037 6.320988 15.17037 15.170371v131.476543c0 7.585185-6.320988 13.906173-15.17037 13.906173z"
+                    p-id="10076"
+                  ></path>
+                </svg>
+              </p>
+              <p class="o-mm">
+                {{ words['nodata'] || '暂无记录' }}
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-show="load" class="pa full ot-no ol-no z10 ux-none fs-ms nb-ll co-main" style="background-color: rgba(255, 255, 255, 0.5)" ui-flex="col cm">
+      <i ui-load="@d"></i>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount, useSlots, useRoute } from 'vue';
+  import draggable from 'vuedraggable';
+  import { isFunction, isObject, deepcopy, isBoolean, isString, isArray } from '@fekit/utils';
+  import { itable } from '@fekit/itable';
+  import IFollowView from '../IFollowView/IFollowView.vue';
+  import TableColView from './TableColView@v3.vue';
+  import { hasSelected } from './index';
+
+  // 定义接口
+  interface TableColumn {
+    field: string;
+    label: any[];
+    sort?: boolean;
+    fixed?: string | number | boolean;
+    close?: boolean | number | string;
+    _close?: number;
+    _sort?: number;
+    _order?: number;
+    model?: any;
+    attrs?: any;
+    event?: any;
+    popup?: any;
+    child?: any;
+    enums?: any;
+    value?: any;
+  }
+
+  interface ListItem {
+    _id: string | number;
+    __selected?: boolean;
+    id?: string | number;
+    [key: string]: any;
+  }
+
+  interface StateType {
+    name: string;
+    load: number;
+    tool: number;
+    mode: number;
+    id: number;
+    table: TableColumn[];
+    param: Record<string, any>;
+    last: number;
+    _last: number;
+    cacheSelecteds: ListItem[];
+    cacheUnselecteds: ListItem[];
+  }
+
+  interface RowsType {
+    attrs?: any;
+    event?: any;
+  }
+
+  // Props定义
+  interface Props {
+    load?: boolean | number;
+    words?: Record<string, string>;
+    table?: TableColumn[];
+    lists?: ListItem[];
+    select?: boolean | object | Function;
+    crossPageSelection?: boolean;
+    operate?: boolean | object | Function;
+    tools?: boolean | object | Function;
+    rows?: RowsType;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    load: false,
+    words: () => ({}),
+    table: () => [],
+    lists: () => [],
+    select: true,
+    crossPageSelection: false,
+    operate: true,
+    tools: false,
+    rows: () => ({ attrs: {}, event: {} })
+  });
+
+  // Emits定义
+  const emit = defineEmits<{
+    selecteds: [value: any];
+    onsort: [sorts: TableColumn[], callback: () => void];
+  }>();
+
+  // 获取slots和route
+  const slots = useSlots();
+  const route = useRoute();
+
+  // 模板引用
+  const tableRef = ref<HTMLTableElement>();
+
+  // 响应式状态
+  const state = reactive<StateType>({
+    name: 'confs' + route.path.replace(/\//g, '_'),
+    load: 0,
+    tool: 1,
+    mode: 0,
+    id: 0,
+    table: [],
+    param: {},
+    last: 0,
+    _last: 0,
+    // 跨页缓存选中项
+    cacheSelecteds: [],
+    cacheUnselecteds: []
+  });
+
+  // 计算属性
+  const $lists = computed(() => {
+    // 新增跨页选中/取消功能
+    return props.lists?.map((item, idx) => {
+      item._id = item.id || item._id || idx;
+      // 跨页选择场景
+      if (props.crossPageSelection) {
+        // 如果 cacheSelecteds 中存在一条数据的 id 等于 item.id，且 cacheUnselecteds 中不存在，则认为选中
+        const isSelected = state.cacheSelecteds.some((cItem) => cItem._id === item._id) && !state.cacheUnselecteds.some((cItem) => cItem._id === item._id);
+        item.__selected = isSelected;
+      } else {
+        // 原逻辑
+        item.__selected = item.__selected || false;
+      }
+      return item;
+    });
+  });
+
+  const all = computed({
+    get() {
+      return $lists.value.length && $lists.value.every((item) => item.__selected);
+    },
+    set(value: boolean) {
+      $lists.value.map((item: ListItem = {}) => {
+        item.__selected = value;
+      });
+    }
+  });
+
+  const isHasSelect = computed(() => {
+    return hasSelected($lists.value);
+  });
+
+  const selected = computed(() => {
+    let _select = props.select;
+    if (isFunction(_select)) {
+      _select = (_select as Function)();
+    }
+    if (isBoolean(_select) && _select) {
+      _select = {};
+    } else if (isObject(_select)) {
+      _select = _select;
+    } else {
+      _select = false;
+    }
+    return _select;
+  });
+
+  const cols = computed(() => {
+    return (state?.table?.filter((item) => !item._close)?.length || 0) + (selected.value ? 1 : 0) + (props.operate ? 1 : 0);
+  });
+
+  // 方法
+  const pretable = () => {
+    const _cache = JSON.parse(localStorage.getItem(`${state.name}_table`) || '{}');
+    state._last = 0;
+    state.table = deepcopy(props.table || [])
+      .map((item, idx) => {
+        if (!isArray(item.label)) {
+          item.label = [item.label, item.attrs, {}];
+        } else {
+          if (item.label.length < 2) {
+            item.label.push(item.attrs);
+          }
+          if (item.label.length < 3) {
+            item.label.push({});
+          }
+        }
+        if (isFunction(item.label[0])) {
+          item.label[0] = (item.label[0] as Function)($lists.value, item);
+        }
+        if (isFunction(item.label[1])) {
+          item.label[1] = (item.label[1] as Function)($lists.value, item);
+        }
+        if (isFunction(item.label[2])) {
+          item.label[2] = (item.label[2] as Function)($lists.value, item);
+        }
+        if (!isObject(item.label[1])) {
+          item.label[1] = {};
+        }
+        if (!isObject(item.label[2])) {
+          item.label[2] = {};
+        }
+
+        // 缓存关闭字段
+        if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
+          item._close = _cache[item.field]._close;
+        } else {
+          if (item.close === true || item.close === 1 || item.close === 'always') {
+            item._close = 1;
+          }
+        }
+        // 缓存列的排序
+        if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_order')) {
+          item._order = _cache[item.field]._order;
+        }
+        if (!item._close) {
+          state._last = idx;
+        }
+
+        // 缓存字段排序
+        if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_sort')) {
+          item._sort = _cache[item.field]._sort || 0;
+        }
+
+        // 模型处理
+        if (item.model) {
+          if (isString(item.model)) {
+            item.model = [item.model, {}];
+          }
+        } else {
+          item.model = ['Text', {}];
+        }
+
+        return item;
+      })
+      .sort((a, b) => (a._order || 0) - (b._order || 0))
+      .sort((a, b) => {
+        const fixedOrder: Record<string, number> = { 1: -1, l: -1, r: 1 };
+        const aFixed = (a.fixed || '').toString();
+        const bFixed = (b.fixed || '').toString();
+        return (fixedOrder[aFixed] || 0) - (fixedOrder[bFixed] || 0);
+      });
+  };
+
+  const fSelectAll = (value: boolean) => {
+    $lists.value.map((item: ListItem = {}) => {
+      item.__selected = value;
+    });
+  };
+
+  const event = (eventObj: any, data?: any, type?: string) => {
+    const _event: Record<string, Function> = {};
+    if (isObject(eventObj)) {
+      for (const key in eventObj) {
+        const fun = eventObj[key];
+        if (isFunction(fun)) {
+          _event[key] = (...args: any[]) => {
+            return (fun as Function)({ data }, ...args);
+          };
+        }
+      }
+    }
+    return { ..._event };
+  };
+
+  const fCloseItem = (item: TableColumn = {}) => {
+    item._close = item._close ? 0 : 1;
+  };
+
+  const onsort = (col: TableColumn) => {
+    const _sorts = state?.table?.filter((item) => item._sort !== 0);
+    col._sort = col._sort === 0 || !col._sort ? 1 : col._sort === 1 ? 2 : 0;
+    _sorts.unshift(col);
+    emit('onsort', _sorts, () => {
+      state.table.forEach((item) => {
+        if (item.field !== col.field && item._sort !== 0) {
+          item._sort = 0;
+        }
+      });
+    });
+  };
+
+  // 清空跨页选中项
+  const clearCrossPageSelecteds = () => {
+    state.cacheSelecteds = [];
+    state.cacheUnselecteds = [];
+  };
+
+  // 监听器
+  watch(
+    () => props.table,
+    () => {
+      pretable();
+    },
+    { deep: true, immediate: true }
+  );
+
+  watch(
+    $lists,
+    () => {
+      pretable();
+
+      // 新增跨页选中/取消功能
+      if (props.crossPageSelection) {
+        $lists.value?.forEach((item) => {
+          if (item.__selected) {
+            // 如果选中，则在 cacheSelecteds 中存整条数据（避免重复存储）
+            if (!state.cacheSelecteds.some((cItem) => cItem._id === item._id)) {
+              state.cacheSelecteds.push(deepcopy(item)); // 使用 deepcopy 防止引用问题
+            }
+            const unselectIdx = state.cacheUnselecteds.findIndex((cItem) => cItem._id === item._id);
+            if (unselectIdx > -1) {
+              state.cacheUnselecteds.splice(unselectIdx, 1);
+            }
+          } else {
+            // 如果未选中，则从 cacheSelecteds 中移除，并在 cacheUnselecteds 中存整条数据
+            const selectedIdx = state.cacheSelecteds.findIndex((cItem) => cItem._id === item._id);
+            if (selectedIdx > -1) {
+              state.cacheSelecteds.splice(selectedIdx, 1);
+            }
+            if (!state.cacheUnselecteds.some((cItem) => cItem._id === item._id)) {
+              state.cacheUnselecteds.push(deepcopy(item));
+            }
+          }
+        });
+      }
+      if (props.crossPageSelection) {
+        emit('selecteds', deepcopy(state.cacheSelecteds));
+      } else {
+        emit('selecteds', deepcopy(selected.value));
+      }
+    },
+    { deep: true, immediate: true }
+  );
+
+  watch(
+    () => state.table,
+    () => {
+      const _table: Record<string, any> = {};
+      state._last = 0;
+      state.table.forEach((item, idx) => {
+        _table[item.field] = { _order: idx };
+        if (Object.prototype.hasOwnProperty.call(item, '_close')) {
+          _table[item.field]._close = item._close ? 1 : 0;
+        }
+        if (!item._close) {
+          state._last = idx;
+        }
+        if (Object.prototype.hasOwnProperty.call(item, '_sort')) {
+          _table[item.field]._sort = item._sort || 0;
+        }
+      });
+      localStorage.setItem(`${state.name}_table`, JSON.stringify(_table));
+    },
+    { deep: true }
+  );
+
+  // 生命周期
+  onMounted(() => {
+    nextTick(() => {
+      if (tableRef.value) {
+        itable.listen(tableRef.value);
+      }
+    });
+
+    watch(
+      () => state.table,
+      () => {
+        nextTick(() => {
+          if (tableRef.value) {
+            itable.listen(tableRef.value);
+          }
+        });
+      },
+      { deep: true }
+    );
+
+    // 初始化获取缓存的数据排序
+    const _cache = JSON.parse(localStorage.getItem(`${state.name}_table`) || '{}');
+    const _sorts: TableColumn[] = [];
+    Object.keys(_cache)?.forEach((key) => {
+      const item = _cache[key];
+      if (item._sort !== 0) {
+        const col = state.table.find((i) => i.field === key);
+        if (col) {
+          _sorts.unshift(col);
+        }
+      }
+    });
+    emit('onsort', _sorts, () => {
+      const col = _sorts[0];
+      if (col) {
+        state.table.forEach((item) => {
+          if (item.field !== col.field && item._sort !== 0) {
+            item._sort = 0;
+          }
+        });
+      }
+    });
+  });
+
+  onBeforeUnmount(() => {
+    itable.remove();
+  });
+
+  // 暴露方法给父组件
+  defineExpose({
+    clearCrossPageSelecteds,
+    fSelectAll
+  });
+</script>
+
+<style>
+  .tableloader tr:hover td {
+    background-color: #f8f9fa !important;
+  }
+  .tableloader th {
+    font-size: 11px;
+    line-height: 1.5;
+    color: #909399;
+    box-shadow: inset 1px 1px 0 0 #f0f0f0;
+  }
+  .tableloader td {
+    font-size: 12px;
+    line-height: 1.5;
+    color: #606266;
+    box-shadow: inset 1px 1px 0 0 #f0f0f0;
+  }
+  .tableloader th:last-child,
+  .tableloader td:last-child {
+    box-shadow:
+      inset 1px 1px 0 0 #f0f0f0,
+      inset -1px 1px 0 0 #f0f0f0;
+  }
+  .tableloader tr:last-child td {
+    box-shadow:
+      inset 1px 1px 0 0 #f0f0f0,
+      inset 1px -1px 0 0 #f0f0f0;
+  }
+  .tableloader tr:last-child td:last-child {
+    box-shadow:
+      inset 1px 1px 0 0 #f0f0f0,
+      inset -1px -1px 0 0 #f0f0f0;
+  }
+  .tableloader tbody tr:nth-child(2n + 1),
+  .tableloader tbody tr:nth-child(2n + 1) td,
+  .tableloader tbody tr:nth-child(2n + 1) th {
+    background-color: #fff;
+  }
+
+  .tableloader-setwidth {
+    position: absolute;
+    width: 18px;
+    height: 100%;
+    right: -9px;
+    top: 0;
+    z-index: 1;
+    color: red;
+    cursor: col-resize;
+  }
+</style>

package/src/components/loader/TableLoader@v3/index@v3.ts

@@ -0,0 +1,41 @@
+import { isFunction } from '@fekit/utils';
+
+// 定义类型接口
+interface ListItem {
+  _id?: string | number;
+  __selected?: boolean;
+  id?: string | number;
+  [key: string]: any;
+}
+
+// 是否有选中记录
+export const hasSelected = (lists: ListItem[] = []): number => {
+  return (lists?.length && lists?.filter((item) => item.__selected)?.length) || 0;
+};
+
+// 获取选中的记录
+export const getSelectedLists = <T = any>(lists: ListItem[] = [], key: string | ((item: ListItem) => T) = ''): T[] => {
+  return (
+    lists
+      ?.filter((item) => {
+        return item.__selected;
+      })
+      ?.map((item) => {
+        return isFunction(key) ? (key as (item: ListItem) => T)(item) : key ? item[key as string] : item;
+      }) || []
+  );
+};
+
+// 全选计算属性 - 用于Vue2兼容性，Vue3中建议直接使用computed
+export function allSelected(lists: ListItem[]) {
+  return {
+    get(): boolean {
+      return lists.length > 0 && lists.every((item) => item.__selected);
+    },
+    set(value: boolean): void {
+      lists.forEach((item = {}) => {
+        item.__selected = value;
+      });
+    }
+  };
+}

package/src/components/loader/index.ts

@@ -1,5 +1,6 @@
 import FormLoader from './FormLoader';
 import LimitLoader from './LimitLoader';
-import TableLoader from './TableLoader';
+export * from './TableLoader/index';
+import TableLoader from './TableLoader/TableLoader.vue';
 import ViewLoader from './ViewLoader';
 export { FormLoader, LimitLoader, TableLoader, ViewLoader };