feat: 新增 @pureadmin/table 行、列拖拽示例

src/views/pure-table/base/header-renderer/columns.tsx

@@ -0,0 +1,70 @@
+import { message } from "@pureadmin/components";
+import { tableData } from "../data";
+import { ref, computed } from "vue";
+
+// 如果您不习惯tsx写法，可以传slot，然后在template里写
+// 需是hooks写法（函数中有return），避免失去响应性
+export function useColumns() {
+  const search = ref("");
+  const filterTableData = computed(() =>
+    tableData.filter(
+      data =>
+        !search.value ||
+        data.name.toLowerCase().includes(search.value.toLowerCase())
+    )
+  );
+
+  const handleEdit = (index: number, row) => {
+    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+  };
+
+  const handleDelete = (index: number, row) => {
+    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+  };
+
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    },
+    {
+      align: "right",
+      // 自定义表头
+      headerRenderer: () => (
+        <el-input
+          v-model={search.value}
+          size="small"
+          clearable
+          placeholder="Type to search"
+        />
+      ),
+      cellRenderer: ({ index, row }) => (
+        <>
+          <el-button size="small" onClick={() => handleEdit(index + 1, row)}>
+            Edit
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            onClick={() => handleDelete(index + 1, row)}
+          >
+            Delete
+          </el-button>
+        </>
+      )
+    }
+  ];
+
+  return {
+    columns,
+    filterTableData
+  };
+}