lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: Table组件重构中

Browse Source
This commit is contained in:
kailong321200875
2021-10-19 16:40:47 +08:00
parent 7f5ef99ccc
commit f64842462e
28 changed files with 2577 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/components-demo/watermark/index.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="useWatermark，为整个系统提供水印功能。"
type="info"
style="margin-bottom: 20px"
/>
<el-button type="primary" @click="setWatermark('vue-element-plus-admin')">创建水印</el-button>
<el-button type="danger" @click="clear">清除水印</el-button>
<el-button type="warning" @click="setWatermark('vue-element-plus-admin-new')">
重置水印
</el-button>
</div>
</template>
<script setup lang="ts" name="Watermark">
import { onBeforeUnmount } from 'vue'
import { useWatermark } from '@/hooks/web/useWatermark'
const { setWatermark, clear } = useWatermark()
onBeforeUnmount(() => {
clear()
})
</script>

61
src/views/table-demo/basic-table/index.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 基础表格"
type="info"
style="margin-bottom: 20px"
/>
<com-table v-loading="loading" :columns="columns" :data="tableData" />
</div>
</template>
<script setup lang="ts" name="BasicTable">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
</script>
<style></style>

61
src/views/table-demo/border-table/index.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 带边框表格"
type="info"
style="margin-bottom: 20px"
/>
<com-table v-loading="loading" :columns="columns" :data="tableData" border />
</div>
</template>
<script setup lang="ts" name="BorderTable">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
</script>
<style></style>

91
src/views/table-demo/custom-header/index.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 自定义表头"
type="info"
style="margin-bottom: 20px"
/>
<com-table
v-loading="loading"
:columns="columns"
:data="
tableData.filter(
(data) => !search || data.name.toLowerCase().includes(search.toLowerCase())
)
"
>
<template #actionHeader>
<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
</template>
<template #action="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
</template>
</com-table>
</div>
</template>
<script setup lang="ts" name="CustomHeader">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'action',
slots: {
header: 'actionHeader',
default: 'action'
}
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
const search = ref<string>('')
function handleEdit(index: number, row: any) {
console.log(index, row)
}
function handleDelete(index: number, row: any) {
console.log(index, row)
}
</script>
<style></style>

68
src/views/table-demo/custom-index/index.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 自定义索引"
type="info"
style="margin-bottom: 20px"
/>
<com-table v-loading="loading" :columns="columns" :data="tableData" />
</div>
</template>
<script setup lang="ts" name="CustomIndex">
import { ref } from 'vue'
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
const columns = ref<any[]>([
{
field: 'index',
type: 'index',
index: (index: number) => {
return index * 2
}
},
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
])
</script>
<style></style>

125
src/views/table-demo/expand-row/index.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 展开行"
type="info"
style="margin-bottom: 20px"
/>
<com-table ref="multipleTable" v-loading="loading" :columns="columns" :data="tableData">
<template #id="scope">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="商品名称">
<span>{{ scope.row.name }}</span>
</el-form-item>
<el-form-item label="所属店铺">
<span>{{ scope.row.shop }}</span>
</el-form-item>
<el-form-item label="商品 ID">
<span>{{ scope.row.id }}</span>
</el-form-item>
<el-form-item label="店铺 ID">
<span>{{ scope.row.shopId }}</span>
</el-form-item>
<el-form-item label="商品分类">
<span>{{ scope.row.category }}</span>
</el-form-item>
<el-form-item label="店铺地址">
<span>{{ scope.row.address }}</span>
</el-form-item>
<el-form-item label="商品描述">
<span>{{ scope.row.desc }}</span>
</el-form-item>
</el-form>
</template>
</com-table>
</div>
</template>
<script setup lang="ts" name="ExpandRow">
import { ref } from 'vue'
const columns = [
{
field: 'id',
type: 'expand',
slots: {
default: 'id'
}
},
{
field: 'id',
label: '商品ID'
},
{
field: 'name',
label: '商品名称'
},
{
field: 'desc',
label: '描述'
}
]
const tableData = [
{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
},
{
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
},
{
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
},
{
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
</script>
<style lang="less" scoped>
:deep(.demo-table-expand) {
font-size: 0;
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
width: 50%;
margin-right: 0;
margin-bottom: 0;
}
}
</style>

149
src/views/table-demo/fixed-column-header/index.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 固定列和表头"
type="info"
style="margin-bottom: 20px"
/>
<com-table
v-loading="loading"
:columns="columns"
:data="tableData"
border
height="250"
style="width: 820px"
>
<template #action="scope">
<el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</com-table>
</div>
</template>
<script setup lang="ts" name="FixedColumnHeader">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期',
fixed: true,
width: '150'
},
{
field: 'name',
label: '姓名',
width: '120'
},
{
field: 'province',
label: '省份',
width: '120'
},
{
field: 'city',
label: '市区',
width: '120'
},
{
field: 'address',
label: '地址',
width: '300'
},
{
field: 'zip',
label: '邮编',
width: '120'
},
{
field: 'action',
label: '操作',
width: '100',
fixed: 'right',
slots: {
default: 'action'
}
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function handleClick(row: any) {
console.log(row)
}
</script>
<style></style>

110
src/views/table-demo/fixed-column/index.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 固定列"
type="info"
style="margin-bottom: 20px"
/>
<com-table v-loading="loading" :columns="columns" :data="tableData" border style="width: 820px">
<template #action="scope">
<el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</com-table>
</div>
</template>
<script setup lang="ts" name="FixedColumn">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期',
fixed: true,
width: '150'
},
{
field: 'name',
label: '姓名',
width: '120'
},
{
field: 'province',
label: '省份',
width: '120'
},
{
field: 'city',
label: '市区',
width: '120'
},
{
field: 'address',
label: '地址',
width: '300'
},
{
field: 'zip',
label: '邮编',
width: '120'
},
{
field: 'action',
label: '操作',
width: '100',
fixed: 'right',
slots: {
default: 'action'
}
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function handleClick(row: any) {
console.log(row)
}
</script>
<style></style>

81
src/views/table-demo/fixed-header/index.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 固定表头"
type="info"
style="margin-bottom: 20px"
/>
<com-table v-loading="loading" :columns="columns" :data="tableData" height="250" border />
</div>
</template>
<script setup lang="ts" name="FixedHeader">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
</script>
<style></style>

147
src/views/table-demo/fluid-height/index.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 流体高度"
type="info"
style="margin-bottom: 20px"
/>
<com-table
v-loading="loading"
:columns="columns"
:data="tableData"
border
max-height="250"
style="width: 820px"
>
<template #action="scope">
<el-button type="text" size="small" @click="deleteRow(scope.$index)">移除</el-button>
</template>
</com-table>
</div>
</template>
<script setup lang="ts" name="FluidHeight">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期',
fixed: true,
width: '150'
},
{
field: 'name',
label: '姓名',
width: '120'
},
{
field: 'province',
label: '省份',
width: '120'
},
{
field: 'city',
label: '市区',
width: '120'
},
{
field: 'address',
label: '地址',
width: '300'
},
{
field: 'zip',
label: '邮编',
width: '120'
},
{
field: 'action',
label: '操作',
width: '100',
fixed: 'right',
slots: {
default: 'action'
}
}
]
const tableData = ref<IObj[]>([
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
},
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}
])
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function deleteRow(index: number) {
tableData.value.splice(index, 1)
}
</script>
<style></style>

151
src/views/table-demo/merge-table/index.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 合并行或列"
type="info"
style="margin-bottom: 20px"
/>
<com-table
v-loading="loading"
:columns="columns"
:data="tableData"
:span-method="arraySpanMethod"
border
/>
<com-table
v-loading="loading"
:columns="columns1"
:data="tableData"
:span-method="objectSpanMethod"
border
style="margin-top: 20px"
/>
</div>
</template>
<script setup lang="ts" name="MergeTable">
import { ref } from 'vue'
const columns = [
{
field: 'id',
label: 'ID'
},
{
field: 'name',
label: '姓名'
},
{
field: 'amount1',
label: '数值1',
sortable: true
},
{
field: 'amount2',
label: '数值2',
sortable: true
},
{
field: 'amount3',
label: '数值4',
sortable: true
}
]
const columns1 = [
{
field: 'id',
label: 'ID'
},
{
field: 'name',
label: '姓名'
},
{
field: 'amount1',
label: '数值1（元）'
},
{
field: 'amount2',
label: '数值2（元）'
},
{
field: 'amount3',
label: '数值4（元）'
}
]
const tableData = [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function arraySpanMethod({ rowIndex, columnIndex }: any) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
function objectSpanMethod({ rowIndex, columnIndex }: any) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
</script>
<style></style>

145
src/views/table-demo/multi-header/index.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 多级表头"
type="info"
style="margin-bottom: 20px"
/>
<com-table v-loading="loading" :columns="columns" :data="tableData">
<template #address="scope"> 地址是: {{ scope.row.address }} </template>
<template #action="scope">
<el-button type="text" size="small" @click="deleteRow(scope.$index)">移除</el-button>
</template>
</com-table>
</div>
</template>
<script setup lang="ts" name="MultiHeader">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期',
fixed: true,
width: '150'
},
{
label: '配送信息',
children: [
{
field: 'name',
label: '姓名',
width: '120'
},
{
label: '地址',
children: [
{
field: 'province',
label: '省份',
width: '120'
},
{
field: 'city',
label: '市区',
width: '120'
},
{
field: 'address',
label: '地址',
slots: {
default: 'address'
}
},
{
field: 'zip',
label: '邮编',
width: '120'
}
]
}
]
},
{
field: 'action',
label: '操作',
width: '100',
slots: {
default: 'action'
}
}
]
const tableData = ref<any[]>([
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}
])
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function deleteRow(index: number) {
tableData.value.splice(index, 1)
}
</script>
<style></style>

90
src/views/table-demo/multiple-choice/index.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 多选"
type="info"
style="margin-bottom: 20px"
/>
<com-table
ref="multipleTable"
v-loading="loading"
selection
:columns="columns"
:data="tableData"
@selection-change="handleSelectionChange"
/>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])"
>切换第二、第三行的选中状态</el-button
>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</div>
</template>
<script setup lang="ts" name="MultipleChoice">
import { ref, unref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
const multipleTable = ref<HTMLElement | null>(null)
function toggleSelection(rows?: any[]) {
const multipleTableRef = unref(multipleTable as any).getTableRef()
if (rows) {
rows.forEach((row) => {
multipleTableRef.toggleRowSelection(row)
})
} else {
multipleTableRef.clearSelection()
}
}
function handleSelectionChange(val: any) {
console.log(val)
}
</script>
<style></style>

79
src/views/table-demo/page-table/index.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 分页表格"
type="info"
style="margin-bottom: 20px"
/>
<com-table
v-loading="loading"
:columns="columns"
:data="tableData"
:pagination="{
currentPage: 1,
total: 400,
onSizeChange: handleSizeChange,
onCurrentChange: handleCurrentChange
}"
/>
</div>
</template>
<script setup lang="ts" name="PageTable">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function handleSizeChange(val: number) {
console.log(val)
}
function handleCurrentChange(val: number) {
console.log(val)
}
</script>
<style></style>

124
src/views/table-demo/screen-table/index.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 筛选"
type="info"
style="margin-bottom: 20px"
/>
<el-button @click="resetDateFilter">清除日期过滤器</el-button>
<el-button @click="clearFilter">清除所有过滤器</el-button>
<com-table
ref="filterTable"
v-loading="loading"
row-key="date"
:columns="columns"
:data="tableData"
:default-sort="{ prop: 'date', order: 'descending' }"
>
<template #tag="scope">
<el-tag
:type="(scope.row.tag === '家' ? 'primary' : 'success') as any"
disable-transitions
>{{ scope.row.tag }}</el-tag
>
</template>
</com-table>
</div>
</template>
<script setup lang="ts" name="ScreenTable">
import { ref, unref } from 'vue'
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
tag: '家'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
tag: '公司'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
tag: '家'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
tag: '公司'
}
]
const filterTable = ref<HTMLElement | null>(null)
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
const columns = ref<any[]>([
{
field: 'date',
label: '日期',
sortable: true,
width: '180',
columnKey: 'date',
filters: [
{ text: '2016-05-01', value: '2016-05-01' },
{ text: '2016-05-02', value: '2016-05-02' },
{ text: '2016-05-03', value: '2016-05-03' },
{ text: '2016-05-04', value: '2016-05-04' }
],
filterMethod: filterHandler
},
{
field: 'name',
label: '姓名',
sortable: true
},
{
field: 'address',
label: '地址'
},
{
field: 'tag',
label: '标签',
filters: [
{ text: '家', value: '家' },
{ text: '公司', value: '公司' }
],
filterMethod: filterTag,
filterPlacement: 'bottom-end',
slots: {
default: 'tag'
}
}
])
function resetDateFilter() {
const filterTableRef = unref(filterTable as any).getTableRef()
filterTableRef.clearFilter('date')
}
function clearFilter() {
const filterTableRef = unref(filterTable as any).getTableRef()
filterTableRef.clearFilter()
}
function filterTag(value: string, row: any) {
return row.tag === value
}
function filterHandler(value: string, row: any, column: any) {
const property = column['property']
return row[property] === value
}
</script>
<style></style>

82
src/views/table-demo/single-choice/index.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 单选"
type="info"
style="margin-bottom: 20px"
/>
<com-table
ref="singleTable"
v-loading="loading"
highlight-current-row
:columns="columns"
:data="tableData"
@current-change="handleCurrentChange"
/>
<div style="margin-top: 20px">
<el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
<el-button @click="setCurrent()">取消选择</el-button>
</div>
</div>
</template>
<script setup lang="ts" name="SingleChoice">
import { ref, unref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
const singleTable = ref<HTMLElement | null>(null)
function setCurrent(row?: any) {
const singleTableRef = unref(singleTable as any).getTableRef()
singleTableRef.setCurrentRow(row)
}
function handleCurrentChange(val: any) {
console.log(val)
}
</script>
<style></style>

69
src/views/table-demo/sort-table/index.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 排序"
type="info"
style="margin-bottom: 20px"
/>
<com-table
ref="multipleTable"
v-loading="loading"
:columns="columns"
:data="tableData"
:default-sort="{ prop: 'date', order: 'descending' }"
/>
</div>
</template>
<script setup lang="ts" name="SortTable">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期',
sortable: true
},
{
field: 'name',
label: '姓名',
sortable: true
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
</script>
<style></style>

85
src/views/table-demo/state-table/index.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 带状态表格"
type="info"
style="margin-bottom: 20px"
/>
<com-table
v-loading="loading"
:columns="columns"
:data="tableData"
:row-class-name="tableRowClassName"
/>
</div>
</template>
<script setup lang="ts" name="StateTable">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function tableRowClassName({ rowIndex }: any) {
if (rowIndex === 1) {
return 'warning-row'
} else if (rowIndex === 3) {
return 'success-row'
}
return ''
}
</script>
<style lang="less" scoped>
:deep(.el-table) {
.warning-row {
background: oldlace;
}
.success-row {
background: #f0f9eb;
}
}
</style>

61
src/views/table-demo/stripe-table/index.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 带斑马纹表格"
type="info"
style="margin-bottom: 20px"
/>
<com-table v-loading="loading" :columns="columns" :data="tableData" stripe />
</div>
</template>
<script setup lang="ts" name="StripeTable">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
</script>
<style></style>

148
src/views/table-demo/total-table/index.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 表尾合计行"
type="info"
style="margin-bottom: 20px"
/>
<com-table v-loading="loading" :columns="columns" :data="tableData" border show-summary />
<com-table
v-loading="loading"
:columns="columns1"
:data="tableData"
border
height="200"
:summary-method="getSummaries"
show-summary
style="margin-top: 20px"
/>
</div>
</template>
<script setup lang="ts" name="TotalTable">
import { ref } from 'vue'
const columns = [
{
field: 'id',
label: 'ID'
},
{
field: 'name',
label: '姓名'
},
{
field: 'amount1',
label: '数值1',
sortable: true
},
{
field: 'amount2',
label: '数值2',
sortable: true
},
{
field: 'amount3',
label: '数值4',
sortable: true
}
]
const columns1 = [
{
field: 'id',
label: 'ID'
},
{
field: 'name',
label: '姓名'
},
{
field: 'amount1',
label: '数值1（元）'
},
{
field: 'amount2',
label: '数值2（元）'
},
{
field: 'amount3',
label: '数值4（元）'
}
]
const tableData = [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function getSummaries(param: any) {
const { columns, data } = param
const sums: any[] = []
columns.forEach((column: any, index: number) => {
if (index === 0) {
sums[index] = '总价'
return
}
const values = data.map((item: any) => Number(item[column.property]))
if (!values.every((value: number) => isNaN(value))) {
sums[index] = values.reduce((prev: number, curr: number) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
sums[index] += ' 元'
} else {
sums[index] = 'N/A'
}
})
return sums
}
</script>
<style></style>

163
src/views/table-demo/tree-and-load/index.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 树形数据与懒加载"
type="info"
style="margin-bottom: 20px"
/>
<com-table
v-loading="loading"
:columns="columns"
:data="tableData"
row-key="id"
border
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
/>
<com-table
v-loading="loading"
:columns="columns1"
:data="tableData1"
row-key="id"
border
lazy
:load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
style="margin-top: 20px"
/>
</div>
</template>
<script setup lang="ts" name="TreeAndLoad">
import { ref } from 'vue'
const columns = [
{
field: 'date',
label: '日期',
sortable: true
},
{
field: 'name',
label: '姓名',
sortable: true
},
{
field: 'address',
label: '地址'
}
]
const columns1 = [
{
field: 'date',
label: '日期'
},
{
field: 'name',
label: '姓名'
},
{
field: 'address',
label: '地址'
}
]
const tableData = [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
]
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const tableData1 = [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 1000)
function load(_: any, __: any, resolve: Function) {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
}, 1000)
}
</script>
<style></style>