初始化

src/components/SSTable/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="flex">
+      <el-table :data="tableObject.tableList" border style="flex: 1">
+        <slot></slot>
+      </el-table>
+      <el-button
+        ref="ColumnSetting"
+        plain
+        style="writing-mode: vertical-lr; height: 100px; letter-spacing: 2px"
+        @click="clickSetting"
+        >表格列控制</el-button
+      >
+      <el-popover
+        ref="TableColumnPop"
+        :virtual-ref="ColumnSetting"
+        placement="left"
+        width="120px"
+        trigger="click"
+        virtual-triggering
+      >
+        <el-checkbox-group v-model="checkedColumns">
+          <el-checkbox v-for="item in tableColumns" :key="item.field" :label="item.field">
+            {{ item.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-popover>
+    </div>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="pageSize"
+      v-model:page="currentPage"
+      :total="tableObject.total"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  tableObject: { type: Object, default: () => ({ tableList: [] }) },
+  tableColumns: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['update:tableObject', 'getList'])
+
+const currentPage = ref(props.tableObject?.currentPage || 1)
+
+const pageSize = ref(props.tableObject?.pageSize || 20)
+
+const ColumnSetting = ref()
+const TableColumnPop = ref()
+
+const checkedColumns = ref([])
+
+function getList({ page, limit }) {
+  emit('update:tableObject', { ...props.tableObject, currentPage: page, pageSize: limit })
+  nextTick(() => {
+    emit('getList')
+  })
+}
+
+const clickSetting = () => {
+  unref(TableColumnPop).TableColumnPop?.delayHide?.()
+}
+</script>
+
+<style lang="scss" scoped></style>