Skip to content

Commit

Permalink
feat: 添加 @pureadmin/table 表格选择器(单选、多选)示例
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoxian521 committed Dec 4, 2022
1 parent f13faf0 commit 9594031
Show file tree
Hide file tree
Showing 8 changed files with 275 additions and 1 deletion.
2 changes: 1 addition & 1 deletion locales/zh-CN.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ menus:
hsInfiniteScroll: 表格无限滚动
hsdanmaku: 弹幕组件
hsPureTableBase: 基础用法(23个示例)
hsPureTableHigh: 高级用法(9个示例
hsPureTableHigh: 高级用法(10个示例
hsTree: 大数据树业务组件
hsMenuoverflow: 目录超出显示 Tooltip 文字提示
hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
Expand Down
7 changes: 7 additions & 0 deletions src/views/pure-table/high/list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand All @@ -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"),
Expand Down
20 changes: 20 additions & 0 deletions src/views/pure-table/high/table-select/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script setup lang="ts">
import { ref } from "vue";
import radioSelectTable from "./radio/index.vue";
import multipleSelectTable from "./multiple/index.vue";
const model = ref("radio");
</script>

<template>
<el-space>
<el-radio-group v-model="model">
<el-radio-button label="radio">单选</el-radio-button>
<el-radio-button label="multiple">多选</el-radio-button>
</el-radio-group>
<el-divider direction="vertical" />
<component
:is="model === 'radio' ? radioSelectTable : multipleSelectTable"
/>
</el-space>
</template>
74 changes: 74 additions & 0 deletions src/views/pure-table/high/table-select/multiple/columns.tsx
Original file line number Diff line number Diff line change
@@ -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<PaginationProps>({
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
};
}
65 changes: 65 additions & 0 deletions src/views/pure-table/high/table-select/multiple/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<script setup lang="ts">
import { ref } from "vue";
import { useColumns } from "./columns";
const selectRef = ref();
const tableRef = ref();
const {
columns,
pagination,
selectValue,
tableDataEdit,
onClear,
onSure,
removeTag,
handleSelectionChange
} = useColumns(selectRef, tableRef);
</script>

<template>
<el-select
class="w-[160px]"
ref="selectRef"
v-model="selectValue"
placeholder="请选择"
clearable
multiple
collapse-tags
collapse-tags-tooltip
@remove-tag="removeTag"
@clear="onClear"
>
<template #empty>
<div class="w-[600px] m-4">
<pure-table
ref="tableRef"
height="355"
row-key="id"
:header-cell-style="{
background: '#f5f7fa',
color: '#303133'
}"
:data="
tableDataEdit.slice(
(pagination.currentPage - 1) * pagination.pageSize,
pagination.currentPage * pagination.pageSize
)
"
:columns="columns"
:pagination="pagination"
@selection-change="handleSelectionChange"
/>
<el-button
class="absolute bottom-[17px]"
type="primary"
size="small"
text
bg
@click="onSure"
>
确定
</el-button>
</div>
</template>
</el-select>
</template>
61 changes: 61 additions & 0 deletions src/views/pure-table/high/table-select/radio/columns.tsx
Original file line number Diff line number Diff line change
@@ -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<PaginationProps>({
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
};
}
46 changes: 46 additions & 0 deletions src/views/pure-table/high/table-select/radio/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<script setup lang="ts">
import { ref } from "vue";
import { useColumns } from "./columns";
const selectRef = ref();
const {
columns,
pagination,
selectValue,
tableDataEdit,
rowStyle,
onRowClick
} = useColumns(selectRef);
</script>

<template>
<el-select
ref="selectRef"
v-model="selectValue"
placeholder="请选择"
clearable
>
<template #empty>
<div class="w-[600px] m-4">
<pure-table
height="355"
row-key="id"
:header-cell-style="{
background: '#f5f7fa',
color: '#303133'
}"
:row-style="rowStyle"
:data="
tableDataEdit.slice(
(pagination.currentPage - 1) * pagination.pageSize,
pagination.currentPage * pagination.pageSize
)
"
:columns="columns"
:pagination="pagination"
@row-click="onRowClick"
/>
</div>
</template>
</el-select>
</template>
1 change: 1 addition & 0 deletions types/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down

0 comments on commit 9594031

Please sign in to comment.