@elementplus-kit/uikit 1.0.0 → 1.0.2

package/components/table/src/index2.ts

@@ -0,0 +1,219 @@
+import {
+  defineComponent,
+  h,
+  getCurrentInstance,
+  computed,
+  type ExtractPropTypes,
+} from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+import {
+  defaultAttrs,
+  tableSlots,
+  tablecolumnSlots,
+  selectionColumn,
+  indexColumn,
+} from "./constants.ts";
+import { isArray, isObject } from "lodash-es";
+const propsAttrs = {
+  module: {
+    // 公共参数用于业务判断
+    type: Object,
+    default: () => {},
+  },
+  // isRadio: { // 是否为单选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  // isCheckbox: { // 是否为复选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  columns: {
+    // 列数据
+    type: Array,
+    default: () => [],
+  },
+  showSelection: {
+    // 是否显示选择列
+    type: Boolean,
+    default: false,
+  },
+  showIndex: {
+    // 是否显示索引列
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  props: propsAttrs,
+  // emits: eventList,
+
+  // attrs, emit会继承, slots需要设置
+  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+    // 暴露elTable组件上的方法
+    const vm = getCurrentInstance(); // 获取虚拟DOM实例
+    const cTableFnRef = (el) => {
+      if (!el) return;
+      vm.exposed = el; // 设置暴露对象
+      vm.exposeProxy = el; // 设置代理暴露对象
+    };
+
+    // 暴露方法
+    expose({
+      // tableRef,
+    });
+
+    // 属性处理
+    const getAttrs = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+    // 事件处理
+    const getEvents = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+
+    const columnsList = computed(() => {
+      let list = [];
+      list = getArrayColumn();
+      // 处理多选与序号列
+      if (props.showSelection) {
+        list.push(
+          h(ElTableColumn, {
+            type: "selection",
+            width: 55,
+          })
+        );
+      }
+      if (props.showIndex) {
+        list.push(
+          h(ElTableColumn, {
+            label: "序号",
+            type: "index",
+            width: 55,
+          })
+        );
+      }
+      return list;
+    });
+
+    // 处理列数据-数组
+    const getArrayColumn = () => {
+      console.log("adsadsd");
+      // 递归处理数据
+      const list = [];
+
+      const c = (columns, list) => {
+        columns?.map((item) => {
+          const { children, ...p } = item;
+          // 递归处理子列
+          if (isArray(item.children)) {
+            item.children = c(item.children, list);
+          }
+          list.push(p);
+        });
+      };
+      c(props.columns, list);
+      console.log("🚀 ~ getArrayColumn ~ props.columns:", props.columns)
+      console.log("🚀 ~ gggggggg:", list);
+      return list;
+    };
+
+    // 渲染表格列
+    const renderTableColumn = () => {
+      const list = [];
+
+      // 列递归渲染
+      const rColumn = (columns, list) => {
+        console.log("🚀 ~ rColumn ~ columns:", columns);
+        columns?.map((item) => {
+          const { children, ...p } = item;
+
+          // 处理多级表头
+          const listSub = [];
+          if (children?.length) {
+            rColumn(children, listSub);
+          }
+
+          // 处理插槽
+          const itemSlot = {};
+          // column 自带插槽
+          tablecolumnSlots.map((name) => {
+            const slotName = `${item.prop}.${name}`;
+            if (slots[slotName]) {
+              itemSlot[name] = slots[slotName];
+            }
+          });
+
+          // column 列插槽
+          if (slots[item.prop]) {
+            itemSlot["default"] = slots[item.prop];
+          }
+
+          // 赋值
+          if (Object.keys(itemSlot).length) {
+            list.push(
+              h(
+                ElTableColumn,
+                { ...p, class: "c-table-column" },
+                listSub.length
+                  ? { ...itemSlot, default: () => listSub }
+                  : { ...itemSlot }
+              )
+            );
+          } else {
+            list.push(
+              h(
+                ElTableColumn,
+                { ...p, class: "c-table-column" },
+                listSub.length ? { default: () => listSub } : undefined
+              )
+            );
+          }
+        });
+      };
+      rColumn(columnsList.value, list);
+      return list;
+    };
+
+    // 插槽处理
+    const getSlots = () => {
+      const obj = {};
+      tableSlots.map((name) => {
+        if (slots[name]) {
+          obj[name] = slots[name];
+        }
+      });
+      return obj;
+    };
+    // 渲染表格组件
+    const renderTable = () => {
+      // getColumnList();
+      console.log("props", props);
+      console.log("attrs", attrs);
+      return h(
+        ElTable,
+        {
+          ref: cTableFnRef,
+          ...attrs,
+          class: "c-table",
+        },
+        {
+          default: () => renderTableColumn(),
+          ...getSlots(),
+        }
+      );
+    };
+
+    // 返回渲染函数
+    return () => renderTable();
+  },
+});

package/components/table/src/index3.ts

@@ -0,0 +1,233 @@
+import {
+  defineComponent,
+  h,
+  getCurrentInstance,
+  type ExtractPropTypes,
+} from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+import {
+  defaultAttrs,
+  tableSlots,
+  tablecolumnSlots,
+  selectionColumn,
+  indexColumn,
+} from "./constants.ts";
+import { isArray, isObject } from "lodash-es";
+import TableColumn from "./TableColumn.vue"
+const propsAttrs = {
+  module: {
+    // 公共参数用于业务判断
+    type: Object,
+    default: () => {},
+  },
+  // isRadio: { // 是否为单选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  // isCheckbox: { // 是否为复选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  columns: {
+    // 列数据
+    type: Array,
+    default: () => [],
+  },
+  showSelection: {
+    // 是否显示选择列
+    type: Boolean,
+    default: false,
+  },
+  showIndex: {
+    // 是否显示索引列
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  props: propsAttrs,
+  // emits: eventList,
+
+  // attrs, emit会继承, slots需要设置
+  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+    provide("tableContext", {
+      tableSlots: slots,
+      events: (eProp, ...args: any) => {
+        emit(eProp, ...args);
+      },
+    });
+    // 暴露elTable组件上的方法
+    const vm = getCurrentInstance(); // 获取虚拟DOM实例
+    const cTableFnRef = (el) => {
+      if (!el) return;
+      vm.exposed = el; // 设置暴露对象
+      vm.exposeProxy = el; // 设置代理暴露对象
+    };
+
+    // 暴露方法
+    expose({
+      // tableRef,
+    });
+
+    // 属性处理
+    const getAttrs = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+    // 事件处理
+    const getEvents = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+    // 插槽处理
+    const getSlots = () => {
+      const obj = {};
+      tableSlots.map((name) => {
+        if (slots[name]) {
+          obj[name] = slots[name];
+        }
+      });
+      return obj;
+    };
+
+    // // 处理列数据-数组
+    // const getArrayColumn = () => {
+    //   console.log("adsadsd");
+    //   // 递归处理数据
+    //   const list = [];
+
+    //   const c = (columns, list) => {
+    //     columns?.map((item) => {
+    //       const { children, ...p } = item;
+    //       // 递归处理子列
+    //       if (isArray(item.children)) {
+    //         item.children = c(item.children, list);
+    //       }
+    //       list.push(p);
+    //     });
+    //   };
+    //   c(props.columns, list);
+    //   console.log("🚀 ~ gggggggg:", list);
+    //   return list;
+    // };
+
+    // // 渲染表格列
+    // const renderTableColumn = () => {
+    //   const list = [];
+    //   // 处理多选与序号列
+    //   if (props.showSelection) {
+    //     list.push(
+    //       h(ElTableColumn, {
+    //         type: "selection",
+    //         width: 55,
+    //       })
+    //     );
+    //   }
+    //   if (props.showIndex) {
+    //     list.push(
+    //       h(ElTableColumn, {
+    //         label: "序号",
+    //         type: "index",
+    //         width: 55,
+    //       })
+    //     );
+    //   }
+
+    //   // 列递归渲染
+    //   const rColumn = (columns, list) => {
+    //     columns.map((item) => {
+    //       const { children, ...p } = item;
+
+    //       // 处理多级表头
+    //       const listSub = [];
+    //       if (children?.length) {
+    //         rColumn(children, listSub);
+    //       }
+
+    //       // 处理插槽
+    //       const itemSlot = {};
+    //       // column 自带插槽
+    //       tablecolumnSlots.map((name) => {
+    //         const slotName = `${item.prop}.${name}`;
+    //         if (slots[slotName]) {
+    //           itemSlot[name] = slots[slotName];
+    //         }
+    //       });
+
+    //       // column 列插槽
+    //       if (slots[item.prop]) {
+    //         itemSlot["default"] = slots[item.prop];
+    //       }
+
+    //       // 赋值
+    //       if (Object.keys(itemSlot).length) {
+    //         list.push(
+    //           h(
+    //             ElTableColumn,
+    //             { ...p, class: "c-table-column" },
+    //             listSub.length
+    //               ? { ...itemSlot, default: () => listSub }
+    //               : { ...itemSlot }
+    //           )
+    //         );
+    //       } else {
+    //         list.push(
+    //           h(
+    //             ElTableColumn,
+    //             { ...p, class: "c-table-column" },
+    //             listSub.length ? { default: () => listSub } : undefined
+    //           )
+    //         );
+    //       }
+    //     });
+    //   };
+    //   rColumn(props.columns, list);
+    //   return list;
+    // };
+
+    const renderTableColumn = () => {
+      const list = []
+      const rTableColumn = (columnsList, list) => {
+        
+      }
+      columns.map((item) => {
+        
+        const { children, ...p } = item;
+        // 递归处理子列
+        if (isArray(item.children)) {
+          item.children = renderTableColumn(item.children);
+        }
+      })
+    }
+    
+    TableColumn
+    // 渲染表格组件
+    const renderTable = () => {
+      // getColumnList();
+      console.log("props", props);
+      console.log("attrs", attrs);
+      return h(
+        ElTable,
+        {
+          ref: cTableFnRef,
+          ...attrs,
+          class: "c-table",
+        },
+        {
+          default: () => renderTableColumn(),
+          ...getSlots(),
+        }
+      );
+    };
+
+    // 返回渲染函数
+    return () => renderTable();
+  },
+});

package/components/table2/index.ts

@@ -1,5 +1,4 @@
 import Table2 from "./src/index";
-// import './style/index.scss'
-
-export const CDrawer = Table2;
-export default { com: Table2, name: "CTable2" };
+export * from "./src/index";
+export { Table2 };
+export default Table2;

package/components/table2/src/index.ts

@@ -1,205 +1,12 @@
-import { h, getCurrentInstance, type ExtractPropTypes } from "vue";
-import { ElTable, ElTableColumn } from "element-plus";
-import {
-  defaultAttrs,
-  tableSlots,
-  tablecolumnSlots,
-  selectionColumn,
-  indexColumn,
-} from "./constants.ts";
-import { isArray, isObject } from "lodash-es";
-const propsAttrs = {
-  module: {
-    // 公共参数用于业务判断
-    type: Object,
-    default: () => {},
-  },
-  // isRadio: { // 是否为单选框
-  //   type: Boolean,
-  //   default: false,
-  // },
-  // isCheckbox: { // 是否为复选框
-  //   type: Boolean,
-  //   default: false,
-  // },
-  columns: {
-    // 列数据
-    type: Array,
-    default: () => [],
-  },
-  showSelection: {
-    // 是否显示选择列
-    type: Boolean,
-    default: false,
-  },
-  showIndex: {
-    // 是否显示索引列
-    type: Boolean,
-    default: false,
-  },
-};
-
-export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
-
-export default {
-  props: propsAttrs,
-  // emits: eventList,
-
-  // attrs, emit会继承, slots需要设置
-  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
-    // 暴露elTable组件上的方法
-    const vm = getCurrentInstance(); // 获取虚拟DOM实例
-    const cTableFnRef = (el) => {
-      if (!el) return;
-      vm.exposed = el; // 设置暴露对象
-      vm.exposeProxy = el; // 设置代理暴露对象
-    };
-
-    // 暴露方法
-    expose({
-      // tableRef,
-    });
-
-    // 属性处理
-    const getAttrs = () => {
-      const obj = {
-        ...defaultAttrs, // 设置默认值
-      };
-      return obj;
-    };
-    // 事件处理
-    const getEvents = () => {
-      const obj = {
-        ...defaultAttrs, // 设置默认值
-      };
-      return obj;
-    };
+import { defineComponent } from "vue";
+import render from "./render.ts";
 
-    // 处理列数据-数组
-    const getArrayColumn = () => {
-      console.log("adsadsd");
-      // 递归处理数据
-      const list = [];
-
-      const c = (columns, list) => {
-        columns?.map((item) => {
-          const { children, ...p } = item;
-          // 递归处理子列
-          if (isArray(item.children)) {
-            item.children = c(item.children, list);
-          }
-          list.push(p);
-        });
-      };
-      c(props.columns, list);
-      console.log("🚀 ~ gggggggg:", list);
-      return list;
-    };
-
-    // 渲染表格列
-    const renderTableColumn = () => {
-      const list = [];
-      // 处理多选与序号列
-      if (props.showSelection) {
-        list.push(
-          h(ElTableColumn, {
-            type: "selection",
-            width: 55,
-          })
-        );
-      }
-      if (props.showIndex) {
-        list.push(
-          h(ElTableColumn, {
-            label: "序号",
-            type: "index",
-            width: 55,
-          })
-        );
-      }
-
-      // 列递归渲染
-      const rColumn = (columns, list) => {
-        columns.map((item) => {
-          const { children, ...p } = item;
-
-          // 处理多级表头
-          const listSub = [];
-          if (children?.length) {
-            rColumn(children, listSub);
-          }
-
-          // 处理插槽
-          const itemSlot = {};
-          // column 自带插槽
-          tablecolumnSlots.map((name) => {
-            const slotName = `${item.prop}.${name}`;
-            if (slots[slotName]) {
-              itemSlot[name] = slots[slotName];
-            }
-          });
-
-          // column 列插槽
-          if (slots[item.prop]) {
-            itemSlot["default"] = slots[item.prop];
-          }
-
-          // 赋值
-          if (Object.keys(itemSlot).length) {
-            list.push(
-              h(
-                ElTableColumn,
-                { ...p, class: "c-table-column" },
-                listSub.length
-                  ? { ...itemSlot, default: () => listSub }
-                  : { ...itemSlot }
-              )
-            );
-          } else {
-            list.push(
-              h(
-                ElTableColumn,
-                { ...p, class: "c-table-column" },
-                listSub.length ? { default: () => listSub } : undefined
-              )
-            );
-          }
-        });
-      };
-      rColumn(props.columns, list);
-      return list;
-    };
-
-    // 插槽处理
-    const getSlots = () => {
-      const obj = {};
-      tableSlots.map((name) => {
-        if (slots[name]) {
-          obj[name] = slots[name];
-        }
-      });
-      return obj;
-    };
-    // 渲染表格组件
-    const renderTable = () => {
-      // getColumnList();
-      console.log("props", props);
-      console.log("attrs", attrs);
-      return h(
-        ElTable,
-        {
-          ref: cTableFnRef,
-          ...attrs,
-          class: "c-table",
-        },
-        {
-          default: () => renderTableColumn(),
-          ...getSlots(),
-        }
-      );
+export default defineComponent({
+  props: ["schema", "data"],
+  emits: [],
+  setup(props: any, { attrs, emit, slots, expose }) {
+    return () => {
+      return render(props.schema, props.data, emit, slots);
     };
-
-    // 返回渲染函数
-    return () => renderTable();
   },
-};
+});