diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 3bbe02cf52..3ef2c24d9f 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -99,7 +99,7 @@ menus:
hsInfiniteScroll: 表格无限滚动
hsdanmaku: 弹幕组件
hsPureTableBase: 基础用法(23个示例)
- hsPureTableHigh: 高级用法(9个示例)
+ hsPureTableHigh: 高级用法(10个示例)
hsTree: 大数据树业务组件
hsMenuoverflow: 目录超出显示 Tooltip 文字提示
hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx
index 766fc7ccca..e7b7cfc60d 100644
--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@@ -7,6 +7,7 @@ import Edit from "./edit/index.vue";
import Watermark from "./watermark/index.vue";
import Print from "./prints/index.vue";
import Echarts from "./echarts/index.vue";
+import TableSelect from "./table-select/index.vue";
const rendContent = (val: string) =>
`代码位置:src/views/pure-table/high/${val}/index.vue`;
@@ -18,6 +19,12 @@ export const list = [
title: "分页、加载动画",
component: Page
},
+ {
+ key: "tableSelect",
+ content: rendContent("table-select"),
+ title: "表格选择器",
+ component: TableSelect
+ },
{
key: "rowDrag",
content: rendContent("drag/row"),
diff --git a/src/views/pure-table/high/table-select/index.vue b/src/views/pure-table/high/table-select/index.vue
new file mode 100644
index 0000000000..4471148cdd
--- /dev/null
+++ b/src/views/pure-table/high/table-select/index.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+ 单选
+ 多选
+
+
+
+
+
diff --git a/src/views/pure-table/high/table-select/multiple/columns.tsx b/src/views/pure-table/high/table-select/multiple/columns.tsx
new file mode 100644
index 0000000000..ba4cb002c2
--- /dev/null
+++ b/src/views/pure-table/high/table-select/multiple/columns.tsx
@@ -0,0 +1,74 @@
+import { tableDataEdit } from "../../data";
+import { ref, reactive, type Ref } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useColumns(selectRef: Ref, tableRef: Ref) {
+ const selectValue = ref([]);
+ const columns: TableColumnList = [
+ {
+ type: "selection",
+ align: "left"
+ },
+ {
+ label: "ID",
+ prop: "id",
+ width: 80
+ },
+ {
+ label: "日期",
+ prop: "date"
+ },
+ {
+ label: "姓名",
+ prop: "name"
+ },
+ {
+ label: "地址",
+ prop: "address"
+ }
+ ];
+
+ /** 分页配置 */
+ const pagination = reactive({
+ pageSize: 10,
+ currentPage: 1,
+ layout: "prev, pager, next",
+ total: tableDataEdit.length,
+ background: true,
+ small: true
+ });
+
+ const handleSelectionChange = val => {
+ const arr = [];
+ val.forEach(v => {
+ arr.push(v.name);
+ });
+ selectValue.value = arr;
+ };
+
+ const removeTag = val => {
+ // TODO optimize el-select add formatter
+ const { toggleRowSelection } = tableRef.value.getTableRef();
+ toggleRowSelection(tableDataEdit.filter(v => v.name === val)[0], false);
+ };
+
+ const onClear = () => {
+ const { clearSelection } = tableRef.value.getTableRef();
+ clearSelection();
+ };
+
+ const onSure = () => {
+ selectRef.value.blur();
+ };
+
+ return {
+ columns,
+ pagination,
+ selectValue,
+ tableDataEdit,
+ onSure,
+ onClear,
+ removeTag,
+ handleSelectionChange
+ };
+}
diff --git a/src/views/pure-table/high/table-select/multiple/index.vue b/src/views/pure-table/high/table-select/multiple/index.vue
new file mode 100644
index 0000000000..68747ffbe0
--- /dev/null
+++ b/src/views/pure-table/high/table-select/multiple/index.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/views/pure-table/high/table-select/radio/columns.tsx b/src/views/pure-table/high/table-select/radio/columns.tsx
new file mode 100644
index 0000000000..f7c0b0b4f5
--- /dev/null
+++ b/src/views/pure-table/high/table-select/radio/columns.tsx
@@ -0,0 +1,61 @@
+import { message } from "@/utils/message";
+import { tableDataEdit } from "../../data";
+import { ref, reactive, type Ref } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useColumns(selectRef: Ref) {
+ const selectValue = ref("");
+ const columns: TableColumnList = [
+ {
+ label: "ID",
+ prop: "id",
+ width: 80
+ },
+ {
+ label: "日期",
+ prop: "date"
+ },
+ {
+ label: "姓名",
+ prop: "name"
+ },
+ {
+ label: "地址",
+ prop: "address"
+ }
+ ];
+
+ /** 分页配置 */
+ const pagination = reactive({
+ pageSize: 5,
+ currentPage: 1,
+ layout: "prev, pager, next",
+ total: tableDataEdit.length,
+ background: true,
+ small: true
+ });
+
+ /** 高亮当前选中行 */
+ function rowStyle({ row: { name } }) {
+ return {
+ cursor: "pointer",
+ background: name === selectValue.value ? "#f5f7fa" : ""
+ };
+ }
+
+ /** 行点击 */
+ function onRowClick(row) {
+ selectValue.value = row.name;
+ selectRef.value.blur();
+ message(`当前选中行的数据为:${JSON.stringify(row)}`, { type: "success" });
+ }
+
+ return {
+ columns,
+ pagination,
+ selectValue,
+ tableDataEdit,
+ rowStyle,
+ onRowClick
+ };
+}
diff --git a/src/views/pure-table/high/table-select/radio/index.vue b/src/views/pure-table/high/table-select/radio/index.vue
new file mode 100644
index 0000000000..e42bc4b0be
--- /dev/null
+++ b/src/views/pure-table/high/table-select/radio/index.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
diff --git a/types/global.d.ts b/types/global.d.ts
index 7c98a4cc7a..07c668b6ca 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -4,6 +4,7 @@ import type {
PropType as VuePropType,
ComponentPublicInstance
} from "vue";
+import type { ECharts } from "echarts";
import type { IconifyIcon } from "@iconify/vue";
import type { TableColumns } from "@pureadmin/table";
import { type RouteComponent, type RouteLocationNormalized } from "vue-router";