-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 添加
@pureadmin/table
表格选择器(单选、多选)示例
- Loading branch information
1 parent
f13faf0
commit 9594031
Showing
8 changed files
with
275 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
74
src/views/pure-table/high/table-select/multiple/columns.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters