缩小表单尺寸

klp-ui/src/components/KLPUI/KLPTable/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="base-table">
+    <!-- 给内部表格添加ref，方便暴露 -->
+    <el-table
+      ref="internalTable"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :data="data"
+      :loading="loading"
+    >
+      <!-- 通过配置数组渲染列 -->
+      <template v-for="(column, index) in columns">
+        <el-table-column
+          v-if="column.visible !== false"
+          v-bind="column"
+        >
+          <!-- 列的自定义内容插槽 -->
+          <template v-if="column.slot" #default="scope">
+            <slot :name="column.slot" :scope="scope"></slot>
+          </template>
+          
+          <!-- 表头自定义内容 -->
+          <template v-if="column.headerSlot" #header>
+            <slot :name="column.headerSlot"></slot>
+          </template>
+        </el-table-column>
+      </template>
+      
+      <!-- 操作列 -->
+      <el-table-column 
+        v-if="showActionColumn"
+        :label="actionColumnLabel"
+        :width="actionColumnWidth"
+        :fixed="actionColumnFixed"
+        :align="actionColumnAlign"
+      >
+        <template #default="scope">
+          <slot name="action" :scope="scope"></slot>
+        </template>
+      </el-table-column>
+      
+      <!-- 原生插槽，支持直接写el-table-column -->
+      <slot></slot>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseTable',
+  props: {
+    // 表格数据
+    data: {
+      type: Array,
+      default: () => []
+    },
+    // 列配置数组
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 是否显示加载状态
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示操作列
+    showActionColumn: {
+      type: Boolean,
+      default: false
+    },
+    // 操作列标题
+    actionColumnLabel: {
+      type: String,
+      default: '操作'
+    },
+    // 操作列宽度
+    actionColumnWidth: {
+      type: Number,
+      default: 150
+    },
+    // 操作列固定方式
+    actionColumnFixed: {
+      type: String,
+      default: 'right'
+    },
+    // 操作列内容对齐方式
+    actionColumnAlign: {
+      type: String,
+      default: 'center'
+    }
+  },
+  // 暴露内部表格的方法和属性
+  methods: {
+    /**
+     * 获取内部el-table实例
+     */
+    getTableInstance() {
+      return this.$refs.internalTable
+    },
+    
+    /**
+     * 代理el-table的常用方法，方便直接调用
+     */
+    clearSelection() {
+      if (this.$refs.internalTable) {
+        this.$refs.internalTable.clearSelection()
+      }
+    },
+    
+    toggleRowSelection(row, selected) {
+      if (this.$refs.internalTable) {
+        this.$refs.internalTable.toggleRowSelection(row, selected)
+      }
+    },
+    
+    toggleAllSelection() {
+      if (this.$refs.internalTable) {
+        this.$refs.internalTable.toggleAllSelection()
+      }
+    },
+    
+    doLayout() {
+      if (this.$refs.internalTable) {
+        this.$refs.internalTable.doLayout()
+      }
+    },
+    
+    sort(prop, order) {
+      if (this.$refs.internalTable) {
+        this.$refs.internalTable.sort(prop, order)
+      }
+    }
+  },
+  
+  // 提供一个$refs的代理，方便访问内部表格
+  mounted() {
+    // 可以在这里添加一些初始化逻辑
+  }
+}
+</script>
+
+<style scoped>
+.base-table {
+  width: 100%;
+  box-sizing: border-box;
+}
+</style>