改为暗色风格主题

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

@@ -0,0 +1,23 @@
+<script>
+  export default {
+    name: 'ColumnRender',
+    functional: true,
+    props: {
+      column: {
+        type: Object,
+        required: true
+      },
+      render: {
+        type: Function,
+        required: true
+      },
+      data: {
+        type: Object,
+        required: true
+      }
+    },
+    render(h, { props }) {
+      return props.render(h, props.data);
+    }
+  }
+</script>

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

@@ -39,6 +39,39 @@
 
       <!-- 3. 透传“自定义列”插槽（业务层直接用 <el-table-column> 嵌套的情况） -->
       <slot v-bind:tableRef="tableRef"></slot>
+
+      <el-table-column
+        v-if="selectionColumn"
+        type="selection"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-if="indexColumn"
+        type="index"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-for="(column, index) in customColumns"
+        v-bind="column"
+        :width="column.width"
+        :prop="column.prop"
+        :align="column.align"
+        :label="column.label"
+        :min-width="column.minWidth"
+        :fixed="column.fixed"
+        :show-overflow-tooltip="column.showOverflowTooltip"
+        :sortable="column.sortable"
+      >
+          <template v-slot="scope">
+            <ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
+            <Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
+            <span v-else>{{ scope.row[column.prop] }}</span>
+        </template>
+      </el-table-column>
     </el-table>
 
     <!-- 扩展层：可后续统一添加分页（如与 MyPagination 组件联动） -->
@@ -47,8 +80,15 @@
 </template>
 
 <script>
+import ColumnRender from './ColumnRender.vue';  
+import Eclipse from './renderer/eclipse.vue';
+
 export default {
-  name: "KLPTable", // 组件名，便于调试和文档生成
+  name: "KLPTable", // 组件名，便于调试和文档生成 
+  components: {
+    ColumnRender,
+    Eclipse
+  },
   props: {
     // 1. 扩展 props：新增原生 Table 没有的属性（如加载状态）
     loading: {
@@ -63,6 +103,18 @@ export default {
     customClass: {
       type: String,
       default: ""
+    },
+    customColumns: {
+      type: Array,
+      default: () => []
+    },
+    selectionColumn: {
+      type: Boolean,
+      default: false
+    },
+    indexColumn: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -71,6 +123,31 @@ export default {
     };
   },
   methods: {
+    // 核心方法：净化scope，移除可能导致循环引用的属性
+    sanitizeScope(scope) {
+      if (!scope) return {};
+      // 只保留安全的属性（根据实际需求调整）
+      const { row, column, $index, store } = scope;
+      // 深拷贝避免引用传递，同时过滤循环引用
+      return this.deepClone({ row, column, $index, store });
+    },
+    // 安全的深拷贝方法（避免JSON.parse/stringify无法处理的类型）
+    deepClone(obj) {
+      if (obj === null || typeof obj !== "object") return obj;
+      if (obj instanceof Date) return new Date(obj);
+      if (obj instanceof RegExp) return new RegExp(obj);
+      
+      // 避免处理Vue实例（通常带有循环引用）
+      if (obj._isVue) return { _isVue: true };
+
+      const clone = Array.isArray(obj) ? [] : {};
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          clone[key] = this.deepClone(obj[key]);
+        }
+      }
+      return clone;
+    },
     // 3. 透传原生 Table 实例方法（如 clearSelection、doLayout 等）
     // 业务层可通过 this.$refs.myTable.xxx() 调用原生方法
     getTableInstance() {

klp-ui/src/components/KLPUI/KLPTable/renderer/eclipse.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="eclipse-container">
+    <el-tooltip :content="text" placement="top" :disabled="text.length < 10">
+      <span class="eclipse">{{ text }}</span>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Eclipse',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+  }
+}
+</script>
+
+<style>
+.eclipse-container {
+  position: relative; /* 为tooltip提供定位参考 */
+  display: inline-block; /* 确保容器只占内容宽度 */
+}
+
+.eclipse {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block; /* 确保元素有明确的尺寸 */
+  max-width: 100%; /* 限制最大宽度，确保溢出效果生效 */
+}
+</style>