-
项目配置
+
项目配置
import("@/views/pure-table/index.vue"),
+ meta: {
+ title: "pure-admin-table",
+ extraIcon: {
+ svg: true,
+ name: "team-iconxinpin"
+ }
+ }
+ }
+ ]
+};
+
+export default flowChartRouter;
diff --git a/src/style/reset.scss b/src/style/reset.scss
index 2382a7672..97e519773 100644
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -44,16 +44,6 @@ abbr:where([title]) {
text-decoration: underline dotted;
}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- font-size: inherit;
- font-weight: inherit;
-}
-
a {
color: inherit;
text-decoration: inherit;
diff --git a/src/views/able/swiper.vue b/src/views/able/swiper.vue
index e8860e087..376a9bca6 100644
--- a/src/views/able/swiper.vue
+++ b/src/views/able/swiper.vue
@@ -100,7 +100,7 @@ const swiperExample: any[] = [
- {{ item.label }}
+ {{ item.label }}
{
@selectedVal="selectedVal"
:disabled="item.disabled"
/>
-
选中范围：{{ selectRange }}
+ 选中范围：{{ selectRange }}
diff --git a/src/views/pure-table/components/base.vue b/src/views/pure-table/components/base.vue
new file mode 100644
index 000000000..35da65cc0
--- /dev/null
+++ b/src/views/pure-table/components/base.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/src/views/pure-table/components/border.vue b/src/views/pure-table/components/border.vue
new file mode 100644
index 000000000..86078a651
--- /dev/null
+++ b/src/views/pure-table/components/border.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/src/views/pure-table/components/column-template/columns.tsx b/src/views/pure-table/components/column-template/columns.tsx
new file mode 100644
index 000000000..9a51ae6d6
--- /dev/null
+++ b/src/views/pure-table/components/column-template/columns.tsx
@@ -0,0 +1,70 @@
+import { message } from "@pureadmin/components";
+import { tableData } from "../data";
+
+// 如果您不习惯tsx写法，可以传slot，然后在template里写
+// 需是hooks写法（函数中有return），避免失去响应性
+export function useColumns() {
+ const columns: TableColumnList = [
+ {
+ label: "日期",
+ prop: "date",
+ cellRenderer: ({ row }) => (
+
+
+ {row.date}
+
+ )
+ },
+ {
+ label: "姓名",
+ prop: "name",
+ cellRenderer: ({ row }) => (
+
+ {{
+ default: () => (
+ <>
+ name: {row.name}
+ address: {row.address}
+
+ ),
+ reference: () => {row.name}
+ }}
+
+ )
+ },
+ {
+ label: "地址",
+ prop: "address"
+ },
+ {
+ label: "操作",
+ cellRenderer: ({ index, row }) => (
+ <>
+ handleEdit(index + 1, row)}>
+ Edit
+
+ handleDelete(index + 1, row)}
+ >
+ Delete
+
+
+ )
+ }
+ ];
+
+ const handleEdit = (index: number, row) => {
+ message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+ };
+
+ const handleDelete = (index: number, row) => {
+ message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+ };
+
+ return {
+ columns,
+ tableData
+ };
+}
diff --git a/src/views/pure-table/components/column-template/index.vue b/src/views/pure-table/components/column-template/index.vue
new file mode 100644
index 000000000..0962509f3
--- /dev/null
+++ b/src/views/pure-table/components/column-template/index.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/src/views/pure-table/components/customIndex.vue b/src/views/pure-table/components/customIndex.vue
new file mode 100644
index 000000000..f89600978
--- /dev/null
+++ b/src/views/pure-table/components/customIndex.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
diff --git a/src/views/pure-table/components/data.ts b/src/views/pure-table/components/data.ts
new file mode 100644
index 000000000..908c6e0fd
--- /dev/null
+++ b/src/views/pure-table/components/data.ts
@@ -0,0 +1,285 @@
+import dayjs from "dayjs";
+import { clone } from "@pureadmin/utils";
+
+const date = dayjs(new Date()).format("YYYY-MM-DD");
+
+const tableData = [
+ {
+ date,
+ name: "Tom",
+ address: "No. 189, Grove St, Los Angeles"
+ },
+ {
+ date,
+ name: "Jack",
+ address: "No. 189, Grove St, Los Angeles"
+ },
+ {
+ date,
+ name: "Dick",
+ address: "No. 189, Grove St, Los Angeles"
+ },
+ {
+ date,
+ name: "Harry",
+ address: "No. 189, Grove St, Los Angeles"
+ },
+ {
+ date,
+ name: "Sam",
+ address: "No. 189, Grove St, Los Angeles"
+ },
+ {
+ date,
+ name: "Lucy",
+ address: "No. 189, Grove St, Los Angeles"
+ },
+ {
+ date,
+ name: "Mary",
+ address: "No. 189, Grove St, Los Angeles"
+ },
+ {
+ date,
+ name: "Mike",
+ address: "No. 189, Grove St, Los Angeles"
+ }
+];
+
+const cloneData = clone(tableData, true);
+
+const tableDataMore = cloneData.map(item =>
+ Object.assign(item, {
+ state: "California",
+ city: "Los Angeles",
+ "post-code": "CA 90036"
+ })
+);
+
+const tableDataSortable = cloneData.map((item, index) =>
+ Object.assign(item, {
+ date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+ })
+);
+
+const tableDataExpand = [
+ {
+ date: "2016-05-03",
+ name: "Tom",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114",
+ family: [
+ {
+ name: "Jerry",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Spike",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Tyke",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ }
+ ]
+ },
+ {
+ date: "2016-05-02",
+ name: "Tom",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114",
+ family: [
+ {
+ name: "Jerry",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Spike",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Tyke",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ }
+ ]
+ },
+ {
+ date: "2016-05-04",
+ name: "Tom",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114",
+ family: [
+ {
+ name: "Jerry",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Spike",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Tyke",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ }
+ ]
+ },
+ {
+ date: "2016-05-01",
+ name: "Tom",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114",
+ family: [
+ {
+ name: "Jerry",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Spike",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Tyke",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ }
+ ]
+ },
+ {
+ date: "2016-05-08",
+ name: "Tom",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114",
+ family: [
+ {
+ name: "Jerry",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Spike",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Tyke",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ }
+ ]
+ },
+ {
+ date: "2016-05-06",
+ name: "Tom",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114",
+ family: [
+ {
+ name: "Jerry",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Spike",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Tyke",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ }
+ ]
+ },
+ {
+ date: "2016-05-07",
+ name: "Tom",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114",
+ family: [
+ {
+ name: "Jerry",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Spike",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ },
+ {
+ name: "Tyke",
+ state: "California",
+ city: "San Francisco",
+ address: "3650 21st St, San Francisco",
+ zip: "CA 94114"
+ }
+ ]
+ }
+];
+
+export { tableData, tableDataMore, tableDataSortable, tableDataExpand };
diff --git a/src/views/pure-table/components/expand.vue b/src/views/pure-table/components/expand.vue
new file mode 100644
index 000000000..9b8d4d102
--- /dev/null
+++ b/src/views/pure-table/components/expand.vue
@@ -0,0 +1,72 @@
+
+
+
+
+ switch parent border:
switch child
+ border:
+
+
+
+
State: {{ row.state }}
+
City: {{ row.city }}
+
Address: {{ row.address }}
+
Zip: {{ row.zip }}
+
Family
+
+
+
+
reset date filter
+
reset all filters
+
+
+
+ {{ row.tag }}
+
+
+
+
+
+
+
+ Remove
+
+
+
+
+ Add Item
+
+
+
+
+
+ Toggle selection status of second and third rows
+
+ Clear selection
+
+
+
+
+ Select second row
+ Clear selection
+
+
diff --git a/src/views/system/role/columns.tsx b/src/views/system/role/columns.tsx
index 020cf13ac..94b62152c 100644
--- a/src/views/system/role/columns.tsx
+++ b/src/views/system/role/columns.tsx
@@ -6,10 +6,11 @@ import { Switch, message } from "@pureadmin/components";
export function useColumns() {
const switchLoadMap = ref({});
- const columns = ref([
+ const columns: TableColumnList = [
{
type: "selection",
width: 55,
+ align: "left",
hide: ({ checkList }) => !checkList.includes("勾选列")
},
{
@@ -60,7 +61,7 @@ export function useColumns() {
unCheckedValue={0}
checked-children="已开启"
un-checked-children="已关闭"
- onChange={() => onChange(scope)}
+ onChange={() => onChange(scope as any)}
/>
)
},
@@ -77,7 +78,7 @@ export function useColumns() {
width: 180,
slot: "operation"
}
- ]);
+ ];
function onChange({ row, index }) {
ElMessageBox.confirm(
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 375c7f5fc..962b4e293 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -118,9 +118,9 @@ onMounted(() => {
- {
-
+
diff --git a/src/views/system/user/columns.tsx b/src/views/system/user/columns.tsx
index 54bf398a5..835d890fe 100644
--- a/src/views/system/user/columns.tsx
+++ b/src/views/system/user/columns.tsx
@@ -6,10 +6,11 @@ import { Switch, message } from "@pureadmin/components";
export function useColumns() {
const switchLoadMap = ref({});
- const columns = ref([
+ const columns: TableColumnList = [
{
type: "selection",
width: 55,
+ align: "left",
hide: ({ checkList }) => !checkList.includes("勾选列")
},
{
@@ -65,7 +66,7 @@ export function useColumns() {
unCheckedValue={0}
checked-children="已开启"
un-checked-children="已关闭"
- onChange={() => onChange(scope)}
+ onChange={() => onChange(scope as any)}
/>
)
},
@@ -82,7 +83,7 @@ export function useColumns() {
width: 180,
slot: "operation"
}
- ]);
+ ];
function onChange({ row, index }) {
ElMessageBox.confirm(
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index fc152dcbf..3d1b75b2b 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -131,9 +131,9 @@ onMounted(() => {
- {
-
+
diff --git a/types/global.d.ts b/types/global.d.ts
index 95cc36c08..a933c3de2 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -7,6 +7,7 @@ import type {
} from "vue";
import type { ECharts } from "echarts";
import { type ResponsiveStorage } from "./index";
+import type { TableColumns } from "@pureadmin/table";
// GlobalComponents for Volar
declare module "vue" {
@@ -126,6 +127,9 @@ declare global {
$config: ServerConfigs;
}
+ // 继承 @pureadmin/table 的 TableColumns，方便全局直接调用
+ declare interface TableColumnList extends Array