first commit

src/views/components/table/columns.ts

@@ -0,0 +1,38 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-02-20 14:00:07
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-02-20 14:00:08
+ * @Description:
+ */
+import type { TableColumnData } from '@arco-design/web-vue';
+
+export const columnsData: TableColumnData[] = [
+  {
+    title: '测试表头1',
+    dataIndex: 'column1',
+  },
+  {
+    title: '测试表头2',
+    dataIndex: 'column2',
+  },
+  {
+    title: '测试表头3',
+    dataIndex: 'column3',
+  },
+  {
+    title: '测试表头4',
+    dataIndex: 'column4',
+  },
+  {
+    title: '测试表头5',
+    dataIndex: 'column5',
+  },
+  {
+    title: '操作',
+    dataIndex: '',
+    fixed: 'right',
+    width: 200,
+    slotName: 'opeartion',
+  },
+];

src/views/components/table/config.ts

@@ -0,0 +1,132 @@
+import type { Form } from '../wyg-form/interface';
+export const options = [
+  {
+    value: 'beijing',
+    label: 'Beijing',
+    children: [
+      {
+        value: 'chaoyang',
+        label: 'ChaoYang',
+        children: [
+          {
+            value: 'datunli',
+            label: 'Datunli',
+          },
+        ],
+      },
+      {
+        value: 'haidian',
+        label: 'Haidian',
+      },
+      {
+        value: 'dongcheng',
+        label: 'Dongcheng',
+      },
+      {
+        value: 'xicheng',
+        label: 'Xicheng',
+        children: [
+          {
+            value: 'jinrongjie',
+            label: 'Jinrongjie',
+          },
+          {
+            value: 'tianqiao',
+            label: 'Tianqiao',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'shanghai',
+    label: 'Shanghai',
+    children: [
+      {
+        value: 'huangpu',
+        label: 'Huangpu',
+      },
+    ],
+  },
+];
+
+export const formConfig: Form.FieldItem[] = [
+  {
+    field: 'name',
+    label: '姓名',
+    required: true,
+    value: '波波',
+    component: 'input',
+    allowClear: true,
+    colProps: {
+      span: 20,
+      offset: 100,
+    },
+  },
+  {
+    field: 'age',
+    label: '年龄',
+    required: true,
+    value: '18',
+    component: 'input',
+    allowClear: true,
+  },
+  {
+    field: 'hobby',
+    label: '爱好',
+    required: true,
+    value: '',
+    component: 'input',
+  },
+  {
+    field: 'school',
+    label: '学校',
+    required: true,
+    value: '',
+    component: 'input',
+  },
+  {
+    field: 'sex',
+    label: '性别',
+    required: true,
+    component: 'select',
+    lists: [
+      {
+        label: '男',
+        value: 'M',
+      },
+      {
+        label: '女',
+        value: 'F',
+      },
+    ],
+  },
+  {
+    field: 'birthTime',
+    label: '时间',
+    component: 'time',
+  },
+  {
+    field: 'birthDate',
+    label: '出生日期',
+    component: 'date',
+  },
+  {
+    field: 'rangeDate',
+    label: '日期范围',
+    component: 'rangeDate',
+  },
+  {
+    field: 'address',
+    label: '地址',
+    component: 'cascader',
+    options,
+  },
+  {
+    field: 'desc',
+    label: '自我介绍',
+    required: true,
+    value: '',
+    component: 'input',
+  },
+];

src/views/components/table/index.md

@@ -0,0 +1,27 @@
+# Table 说明
+
+## 说明
+
+`<a-table v-bind="propsRes" v-on="propsEvent" ></a-table>`
+
+`复写a-table中原始的v-bind及v-on属性，propRes负责处理属性，propsEvent负责处理a-table的事件`
+
+`setProps：设置a-table的属性，类型为：IDefaultProps`
+
+`setColumns：设置table中columns的属性，类型为：TableColumnData[]`
+
+`setLoadListParams: 设置列表数据接口的请求参数，类型为自定义`
+
+`loadTableData：获取列表数据，返回列表参数`
+
+## 使用方式
+
+`<a-table v-bind="propsRes" v-on="propsEvent">`
+<br>
+`<template #xx></template> // 自定义插槽名称，在setColumns的传入值中设置`
+<br>
+`</a-table>`
+
+## 示例
+
+`具体参照table文件夹的示例`

src/views/components/table/index.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: 田鑫
+ * @Date: 2023-02-20 13:58:48
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-02-28 12:05:03
+ * @Description: table示例
+-->
+
+<template>
+  <div>
+    <a-table v-bind="propsRes" v-on="propsEvent">
+      <template #opeartion="{ record }">
+        <div flex>
+          <a-link>编辑</a-link>
+          <ConfirmButton content="确定要删除该条数据吗？" popupType="error" @confirm-emit="deleteItem(record)">
+            <a-link>删除</a-link>
+          </ConfirmButton>
+          <a-link>下载</a-link>
+        </div>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fetchTableData, type IExample } from '@/api/example';
+import useTableProps from '@/hooks/table-hooks';
+import { Message } from '@arco-design/web-vue';
+import { columnsData } from './columns';
+
+const { propsRes, propsEvent, setProps, setColumns, setLoadListParams, loadTableData } =
+  useTableProps<IExample.ITableResponse>(fetchTableData);
+setProps({
+  'row-key': 'id',
+  'row-selection': {
+    type: 'checkbox',
+    showCheckedAll: true,
+  },
+  'selected-keys': [1, 2, 3],
+});
+setColumns(columnsData);
+onMounted(async () => {
+  await loadTableData();
+});
+
+function add() {
+  Message.info('=sa');
+}
+
+function deleteItem(record) {}
+</script>
+<style lang="less" scoped></style>