wip: Table component developing

src/components/Search/src/Search.vue

@@ -39,9 +39,16 @@ const emit = defineEmits(['search', 'reset'])
 const visible = ref(true)
 
 const newSchema = computed(() => {
-  let schema: FormSchema[] = []
+  let schema: FormSchema[] = cloneDeep(props.schema)
+  if (props.expand && props.expandField && !unref(visible)) {
+    const index = findIndex(schema, (v: FormSchema) => v.field === props.expandField)
+    if (index > -1) {
+      const length = schema.length
+      schema.splice(index + 1, length)
+    }
+  }
   if (props.layout === 'inline') {
-    schema = cloneDeep(props.schema).concat([
+    schema = schema.concat([
       {
         field: 'action',
         formItemProps: {
@@ -49,14 +56,6 @@ const newSchema = computed(() => {
         }
       }
     ])
-  } else {
-    schema = cloneDeep(props.schema)
-  }
-  if (props.expand && props.expandField && !unref(visible)) {
-    const index = findIndex(schema, (v: FormSchema) => v.field === props.expandField)
-    if (index > -1) {
-      schema.splice(0, index + 1)
-    }
   }
   return schema
 })
@@ -86,6 +85,11 @@ const bottonButtonStyle = computed(() => {
     textAlign: props.buttomPosition
   }
 }) as CSSProperties
+
+const setVisible = () => {
+  unref(elFormRef)?.resetFields()
+  visible.value = !unref(visible)
+}
 </script>
 
 <template>
@@ -108,7 +112,7 @@ const bottonButtonStyle = computed(() => {
           <Icon icon="ep:refresh-right" class="mr-5px" />
           {{ t('common.reset') }}
         </ElButton>
-        <ElButton v-if="showReset" type="text" @click="visible = !visible">
+        <ElButton v-if="showReset" type="text" @click="setVisible">
           {{ t(visible ? 'common.shrink' : 'common.expand') }}
           <Icon :icon="visible ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
         </ElButton>
@@ -126,7 +130,7 @@ const bottonButtonStyle = computed(() => {
         <Icon icon="ep:refresh-right" class="mr-5px" />
         {{ t('common.reset') }}
       </ElButton>
-      <ElButton v-if="showReset" type="text" @click="visible = !visible">
+      <ElButton v-if="showReset" type="text" @click="setVisible">
         {{ t(visible ? 'common.shrink' : 'common.expand') }}
         <Icon :icon="visible ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
       </ElButton>

src/components/Table/index.ts

@@ -0,0 +1,3 @@
+import Table from './src/Table.vue'
+
+export { Table }

src/components/Table/src/Table.vue

@@ -0,0 +1,126 @@
+<script lang="tsx">
+import { ElTable, ElTableColumn } from 'element-plus'
+import { defineComponent, PropType, ref, computed, unref } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+import { setIndex } from './helper'
+import { getSlot } from '@/utils/tsxHelper'
+
+export default defineComponent({
+  name: 'Table',
+  props: {
+    // 是否多选
+    selection: propTypes.bool.def(true),
+    // 是否所有的超出隐藏，优先级低于schema中的showOverflowTooltip,
+    showOverflowTooltip: propTypes.bool.def(true),
+    // 表头
+    columns: {
+      type: Array as PropType<TableColumn[]>,
+      default: () => []
+    },
+    // 是否展示分页
+    // pagination: {
+    //   type: [Boolean, Object] as PropType<boolean | IObj>,
+    //   default: false
+    // },
+    // 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
+    reserveSelection: propTypes.bool.def(false),
+    // 加载状态
+    loading: propTypes.bool.def(false),
+    // 是否叠加索引
+    reserveIndex: propTypes.bool.def(true),
+    // 对齐方式
+    align: propTypes.string
+      .validate((v: string) => ['left', 'center', 'right'].includes(v))
+      .def('left'),
+    headerAlign: propTypes.string
+      .validate((v: string) => ['left', 'center', 'right'].includes(v))
+      .def('left'),
+    // 表头对齐方式
+    data: {
+      type: Array as PropType<Recordable[]>,
+      default: () => []
+    }
+  },
+  setup(props, { attrs, slots }) {
+    const tableRef = ref<ComponentRef<typeof ElTable>>()
+
+    const getProps = computed(() => props)
+
+    const getBindValue = computed(() => {
+      const bindValue: Recordable = { ...attrs, ...props }
+      delete bindValue.columns
+      delete bindValue.data
+      return bindValue
+    })
+
+    const renderTableSelection = () => {
+      return (
+        <ElTableColumn
+          type="selection"
+          reserveSelection={props.reserveSelection}
+          align={unref(getProps).align}
+          headerAlign={unref(getProps).headerAlign}
+          width="50"
+        ></ElTableColumn>
+      )
+    }
+
+    const rnderTableColumn = (columns: TableColumn[]) => {
+      return (props.selection ? [renderTableSelection()] : []).concat(
+        columns.map((v, i) => {
+          if (v.type === 'index') {
+            return (
+              <ElTableColumn
+                type="index"
+                index={v.index ? v.index : setIndex()}
+                align={v.align || unref(getProps).align}
+                headerAlign={v.headerAlign || unref(getProps).headerAlign}
+                label={v.label}
+                width="100px"
+              ></ElTableColumn>
+            )
+          } else {
+            return (
+              <ElTableColumn
+                showOverflowTooltip={unref(getProps).showOverflowTooltip}
+                align={unref(getProps).align}
+                headerAlign={unref(getProps).headerAlign}
+                {...v}
+                prop={v.field}
+              >
+                {{
+                  default: () =>
+                    // @ts-ignore
+                    getSlot(slots, v.field, { row: props.data[i], field: v.field, index: i }) ||
+                    v?.formatter?.() ||
+                    props.data[i][v.field],
+                  // @ts-ignore
+                  header: getSlot(slots, `${v.field}-header`)
+                }}
+              </ElTableColumn>
+            )
+          }
+        })
+      )
+    }
+
+    return () => (
+      <>
+        <ElTable
+          // @ts-ignore
+          ref={tableRef}
+          data={unref(getProps).data}
+          {...getBindValue}
+          v-loading={unref(getProps).loading}
+        >
+          {{
+            default: () => rnderTableColumn(props.columns),
+            // @ts-ignore
+            append: () => getSlot(slots, 'append')
+          }}
+        </ElTable>
+      </>
+    )
+  }
+})
+</script>

src/components/Table/src/helper.ts

@@ -0,0 +1,3 @@
+export const setIndex = () => {
+  return 1
+}