Skip to content

Commit 8e206d5

Browse files
lpyalpya
committed
feat: 添加综合表格功能
1 parent 1c9b7ff commit 8e206d5

File tree

9 files changed

+250
-16
lines changed

9 files changed

+250
-16
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "my-vue-app",
3-
"version": "0.0.0",
2+
"name": "vue3-vite-elementplus-admin",
3+
"version": "1.0.2",
44
"scripts": {
55
"dev": "vite --mode development",
66
"build": "vite build --mode production",

‎src/App.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<template>
2-
<router-view></router-view>
2+
<el-config-provider :locale="zhCn">
3+
<router-view></router-view>
4+
</el-config-provider>
35
</template>
46
<script lang="ts" setup>
7+
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
58
import { computed } from 'vue'
6-
79
import { useStore } from 'vuex'
810
const store = useStore()
911

‎src/assets/iconfont/iconfont.scss‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@font-face {
22
font-family: "iconfont"; /* Project id 3001982 */
3-
src: url('//at.alicdn.com/t/font_3001982_uhnuq53veud.woff2?t=1642063257007') format('woff2'),
4-
url('//at.alicdn.com/t/font_3001982_uhnuq53veud.woff?t=1642063257007') format('woff'),
5-
url('//at.alicdn.com/t/font_3001982_uhnuq53veud.ttf?t=1642063257007') format('truetype');
3+
src: url('//at.alicdn.com/t/font_3001982_gtz8nwcwhtu.woff2?t=1642128452351') format('woff2'),
4+
url('//at.alicdn.com/t/font_3001982_gtz8nwcwhtu.woff?t=1642128452351') format('woff'),
5+
url('//at.alicdn.com/t/font_3001982_gtz8nwcwhtu.ttf?t=1642128452351') format('truetype');
66
}
77

88
.iconfont {
@@ -13,6 +13,22 @@
1313
-moz-osx-font-smoothing: grayscale;
1414
}
1515

16+
.icon-sync:before {
17+
content: "\e786";
18+
}
19+
20+
.icon-edit-square:before {
21+
content: "\e791";
22+
}
23+
24+
.icon-upload:before {
25+
content: "\e7ef";
26+
}
27+
28+
.icon-plus:before {
29+
content: "\e8fe";
30+
}
31+
1632
.icon-drag:before {
1733
content: "\e842";
1834
}

‎src/interface/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export interface IArticleList {
6666
title: string
6767
author: string
6868
type: string
69+
content: string
6970
status: string
7071
pageviews: number
7172
created_at: string

‎src/main.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import '@/styles/index.scss' //全局样式
66
import '@/assets/iconfont/iconfont.scss'
77
const app = createApp(App)
88

9-
import { ElTag, ElButton, ElMenu, ElIcon, ElBreadcrumb, ElBreadcrumbItem, ElInput, ElForm, ElFormItem, ElTooltip, ElDropdown, ElDropdownItem, ElDropdownMenu, ElRow, ElCol, ElScrollbar, ElTable, ElTableColumn } from 'element-plus'
9+
import { ElDialog, ElConfigProvider, ElPagination, ElLoading, ElTag, ElButton, ElMenu, ElIcon, ElBreadcrumb, ElBreadcrumbItem, ElInput, ElForm, ElFormItem, ElTooltip, ElDropdown, ElDropdownItem, ElDropdownMenu, ElRow, ElCol, ElScrollbar, ElTable, ElTableColumn } from 'element-plus'
1010
import 'element-plus/theme-chalk/index.css'
1111
app.use(ElButton)
1212
app.use(ElMenu)
@@ -26,6 +26,10 @@ app.use(ElScrollbar)
2626
app.use(ElTable)
2727
app.use(ElTableColumn)
2828
app.use(ElTag)
29+
app.use(ElLoading)
30+
app.use(ElPagination)
31+
app.use(ElConfigProvider)
32+
app.use(ElDialog)
2933
import './permission'
3034

3135
import './mock/index'

‎src/mock/article.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: hutu
44
* @Date: 2022-01-12 09:29:52
55
* @LastEditors: hutu
6-
* @LastEditTime: 2022-01-13 10:06:00
6+
* @LastEditTime: 2022-01-17 09:43:26
77
*/
88
import * as Mock from 'mockjs'
99
import { IArticleList, IArticleListQuery } from '@/interface'
@@ -17,6 +17,7 @@ for (let i = 0; i < count; i++) {
1717
title: '@title(5, 10)',
1818
author: '@first',
1919
'type|1': ['vue', 'Laravel', 'react', 'thinkphp'],
20+
content: '@title(5, 10)',
2021
'status|1': ['published', 'draft'],
2122
pageviews: '@integer(300, 5000)',
2223
created_at: '@datetime'

‎src/styles/variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
$white: #fff;
2-
// $baseBg: #f0f2f5;
2+
$baseBg: #f0f2f5;
33
// $menuText: #bfcbd9;
44
// $menuActiveText: #409eff;
55
// $subMenuActiveText: #f4f4f5;

‎src/views/table/complex-table/Index.vue‎

Lines changed: 214 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,220 @@
11
<!--
2-
* @Description:
2+
* @Description: 综合表格
33
* @Author: hutu
4-
* @Date: 2022-01-12 17:32:18
4+
* @Date: 2022-01-12 17:32:00
55
* @LastEditors: hutu
6-
* @LastEditTime: 2022-01-12 17:32:21
6+
* @LastEditTime: 2022-01-17 10:08:57
77
-->
88
<template>
9-
<div class="complex-table">complex-table</div>
9+
<div class="complex-table">
10+
<div class="container">
11+
<div class="complex-header">
12+
<div class="complex-header-action">
13+
<el-button type="info" size="small" @click="refresh">
14+
<el-icon class="iconfont icon-sync"></el-icon>
15+
</el-button>
16+
<el-button type="primary" size="small" @click="dialogVisible = true">
17+
<el-icon class="iconfont icon-plus"></el-icon>
18+
<span>添加</span>
19+
</el-button>
20+
<el-button type="danger" size="small" @click="delArr">
21+
<el-icon class="iconfont icon-delete"></el-icon>
22+
<span>删除</span>
23+
</el-button>
24+
<el-button type="info" size="small">
25+
<el-icon class="iconfont icon-upload"></el-icon>
26+
<span>导出</span>
27+
</el-button>
28+
</div>
29+
<div class="complex-header-input">
30+
<el-input size="small" placeholder="请输入标题" style="width: 400px"></el-input>
31+
</div>
32+
</div>
33+
<div class="complex-content">
34+
<el-table class="complex-content-table" v-loading="loading" :data="article" @selection-change="handleSelectionChange" :stripe="true" height="calc(100vh - 250px)">
35+
<el-table-column type="selection" width="55" align="center"></el-table-column>
36+
<el-table-column prop="id" label="文章ID" width="100" align="center"></el-table-column>
37+
<el-table-column prop="created_at" label="创建时间" width="250" align="center"></el-table-column>
38+
<el-table-column prop="title" label="标题" align="center"></el-table-column>
39+
<el-table-column prop="author" label="作者" width="200" align="center"></el-table-column>
40+
<el-table-column prop="pageviews" label="阅读量" width="150" align="center"></el-table-column>
41+
<el-table-column prop="type" label="类别" width="150" align="center"></el-table-column>
42+
<el-table-column prop="status" label="状态" width="150" align="center">
43+
<template #default="scope">
44+
<el-tag :type="scope.row.status === 'published' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
45+
</template>
46+
</el-table-column>
47+
<el-table-column label="操作" width="250" align="center">
48+
<template #default="scope">
49+
<el-button size="small" type="primary">编辑</el-button>
50+
<el-button size="small" @click="release(scope.row.id)" :type="scope.row.status === 'published' ? '' : 'success'">{{ scope.row.status === 'published' ? '草稿' : '发布' }}</el-button>
51+
<el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
52+
</template>
53+
</el-table-column>
54+
</el-table>
55+
<div class="complex-content-paging">
56+
<el-pagination background :page-size="pageSize" :page-sizes="[15, 30, 45, 60]" layout="sizes, prev, pager, next" :total="100" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
1061
</template>
62+
<script lang="ts" setup>
63+
import { ElNotification, ElMessage } from 'element-plus'
64+
65+
import { ref } from 'vue'
66+
import { getArticleList } from '@/api/article'
67+
import { IArticleList } from '@/interface'
68+
const article = ref<IArticleList[]>([]) //文章列表
69+
const loading = ref<boolean>(true) //加载
70+
const currentPage = ref<number>(1) //当前页
71+
const pageSize = ref<number>(15) //每页大小
72+
const ids = ref<number[]>([]) //用户选择ids
73+
const dialogVisible = ref<boolean>(false) //加载
74+
75+
/**
76+
* @desc: 获取文章列表
77+
*/
78+
const handleGetArticleList = async () => {
79+
loading.value = true
80+
const res = await getArticleList({ page: currentPage.value, limit: pageSize.value })
81+
const { code, data } = res.data
82+
if (code === 10000) {
83+
article.value = data.items
84+
}
85+
loading.value = false
86+
}
87+
/**
88+
* @desc: 删除
89+
* @param {number} id
90+
* @return {*}
91+
*/
92+
const del = (id: number) => {
93+
article.value = article.value.filter((item) => {
94+
return item.id !== id
95+
})
96+
ElNotification.success({
97+
title: '温馨提示',
98+
message: '删除成功',
99+
showClose: true
100+
})
101+
}
102+
/**
103+
* @desc: 删除所选
104+
* @param {*}
105+
* @return {*}
106+
*/
107+
const delArr = () => {
108+
if (ids.value.length === 0) {
109+
ElMessage.warning('请选择文章')
110+
return false
111+
}
112+
ids.value.forEach((item) => {
113+
article.value = article.value.filter((itemTwo) => {
114+
return itemTwo.id !== item
115+
})
116+
})
117+
ElNotification.success({
118+
title: '温馨提示',
119+
message: '删除成功',
120+
showClose: true
121+
})
122+
}
123+
/**
124+
* @desc: 发布
125+
* @param {number} id
126+
* @return {*}
127+
*/
128+
const release = (id: number) => {
129+
article.value.forEach((item) => {
130+
if (item.id === id) {
131+
item.status = item.status === 'draft' ? 'published' : 'draft'
132+
ElMessage.success('操作成功')
133+
}
134+
})
135+
}
136+
/**
137+
* @desc: 刷新
138+
*/
139+
const refresh = () => {
140+
currentPage.value = 1
141+
handleGetArticleList()
142+
}
143+
/**
144+
* @desc: 监听用户全选
145+
* @param {IArticleList[]} arr
146+
* @return {*}
147+
*/
148+
const handleSelectionChange = (arr: IArticleList[]) => {
149+
const arrIds: number[] = []
150+
arr.forEach((item) => {
151+
arrIds.push(item.id)
152+
})
153+
ids.value = arrIds
154+
}
155+
/**
156+
* @desc: 关闭弹窗
157+
* @param {*}
158+
* @return {*}
159+
*/
160+
const handleClose = () => {
161+
dialogVisible.value = false
162+
}
163+
/**
164+
* @desc:设置显示条数
165+
* @param {number} size 显示条数
166+
*/
167+
const handleSizeChange = (size: number) => {
168+
pageSize.value = size
169+
handleGetArticleList()
170+
}
171+
/**
172+
* @desc:设置当前页数
173+
* @param {number} page 页数
174+
*/
175+
const handleCurrentChange = (page: number) => {
176+
currentPage.value = page
177+
handleGetArticleList()
178+
}
179+
180+
handleGetArticleList()
181+
</script>
182+
<style lang="scss">
183+
.complex-table {
184+
height: 100%;
185+
.container {
186+
.complex-header {
187+
display: flex;
188+
justify-content: space-between;
189+
background: $white;
190+
padding: 20px;
191+
border-top: 1px solid #eee;
192+
&-action {
193+
flex: 1;
194+
}
195+
&-input {
196+
display: flex;
197+
.el-input {
198+
margin-right: 15px;
199+
}
200+
}
201+
}
202+
.complex-content {
203+
margin: 20px;
204+
padding: 20px;
205+
border-radius: 4px;
206+
background: $white;
207+
&-table {
208+
background: $baseBg;
209+
}
210+
&-paging {
211+
display: flex;
212+
align-items: center;
213+
justify-content: flex-end;
214+
background: $white;
215+
padding-top: 15px;
216+
}
217+
}
218+
}
219+
}
220+
</style>

‎src/views/table/drag-table/Index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!--
2-
* @Description:
2+
* @Description: 拖拽表格
33
* @Author: hutu
44
* @Date: 2022-01-12 17:32:00
55
* @LastEditors: hutu
6-
* @LastEditTime: 2022-01-13 16:52:14
6+
* @LastEditTime: 2022-01-14 09:57:47
77
-->
88
<template>
99
<div class="drag-table">

0 commit comments

Comments
 (0)