增加表格
This commit is contained in:
zouzhibing
parent
e1d2c84723
commit
f7e677eedb
14
README.md
14
README.md
|
|
@ -3,7 +3,7 @@ vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-p
|
||||||
|
|
||||||
## 效果预览
|
## 效果预览
|
||||||
|
|
||||||
预览地址 [项目预览地址](https://yuanzbz.gitee.io/vue-admin-perfect)
|
预览地址 [项目预览地址](https://yuanzbz.gitee.io/vue-admin-perfect/index.html#/home)
|
||||||
|
|
||||||
附上github地址 [vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)
|
附上github地址 [vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)
|
||||||
|
|
||||||
|
|
@ -30,6 +30,18 @@ vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-p
|
||||||
## 技术栈
|
## 技术栈
|
||||||
vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||||
|
|
||||||
|
## 实现功能
|
||||||
|
- 登录逻辑
|
||||||
|
- 权限校验
|
||||||
|
- 侧边栏导航显示
|
||||||
|
- 打印
|
||||||
|
- 地图
|
||||||
|
- 头像裁剪
|
||||||
|
- 无限滚动
|
||||||
|
- 多标签显示
|
||||||
|
- 退出
|
||||||
|
- 其他各组件
|
||||||
|
|
||||||
## 开发
|
## 开发
|
||||||
```
|
```
|
||||||
# 克隆项目
|
# 克隆项目
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,6 @@ router.beforeEach(async(to, from, next) => {
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
// 路由添加进去了没有及时更新 需要重新进去一次拦截
|
// 路由添加进去了没有及时更新 需要重新进去一次拦截
|
||||||
|
|
||||||
if(!store.state.permission.routes.length){
|
if(!store.state.permission.routes.length){
|
||||||
// 获取权限列表进行接口访问 因为这里页面要切换权限
|
// 获取权限列表进行接口访问 因为这里页面要切换权限
|
||||||
// const roles = await store.dispatch('user/getInfo')
|
// const roles = await store.dispatch('user/getInfo')
|
||||||
|
|
@ -42,8 +41,6 @@ router.beforeEach(async(to, from, next) => {
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
next(`/login?redirect=${to.path}`)
|
next(`/login?redirect=${to.path}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
if (whiteList.indexOf(to.path) !== -1) {
|
if (whiteList.indexOf(to.path) !== -1) {
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ import componentsRouter from './modules/components'
|
||||||
import othersRouter from './modules/other'
|
import othersRouter from './modules/other'
|
||||||
import externalLink from './modules/externalLink'
|
import externalLink from './modules/externalLink'
|
||||||
import permissionRouter from './modules/permission'
|
import permissionRouter from './modules/permission'
|
||||||
|
import tableRouter from './modules/table'
|
||||||
|
|
||||||
|
|
||||||
interface extendRoute {
|
interface extendRoute {
|
||||||
|
|
@ -45,8 +46,10 @@ export const asyncRoutes = [
|
||||||
chatRouter,
|
chatRouter,
|
||||||
componentsRouter,
|
componentsRouter,
|
||||||
othersRouter,
|
othersRouter,
|
||||||
|
tableRouter,
|
||||||
externalLink,
|
externalLink,
|
||||||
permissionRouter
|
permissionRouter,
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
|
||||||
|
/** When your routing table is too long, you can split it into small modules**/
|
||||||
|
|
||||||
|
import Layout from "@/layout/index.vue";
|
||||||
|
|
||||||
|
const tableRouter = {
|
||||||
|
path: '/table',
|
||||||
|
component: Layout,
|
||||||
|
redirect: 'noRedirect',
|
||||||
|
name: 'table',
|
||||||
|
meta: {
|
||||||
|
title: '表格',
|
||||||
|
icon: 'School'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'edit-table',
|
||||||
|
component: () => import('@/views/table/inline-edit-table.vue'),
|
||||||
|
name: 'edit-table',
|
||||||
|
meta: { title: '行内编辑', noCache: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'multi-table',
|
||||||
|
component: () => import('@/views/table/multi-table.vue'),
|
||||||
|
name: 'multi-table',
|
||||||
|
meta: { title: '多级表头', noCache: true }
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default tableRouter
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-table :data="list" style="width: 100%" :border="true">
|
||||||
|
<el-table-column type="index" width="60" label="序号"/>
|
||||||
|
<el-table-column prop="name" label="姓名" min-width="200px">
|
||||||
|
<template #default="scope">
|
||||||
|
<template v-if="scope.row.edit">
|
||||||
|
<div style="display: flex;align-items: center;">
|
||||||
|
<el-input v-model="scope.row.name" size="small" />
|
||||||
|
<el-button
|
||||||
|
|
||||||
|
size="small"
|
||||||
|
icon="Refresh"
|
||||||
|
type="warning"
|
||||||
|
@click="cancelEdit(scope.row)"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>{{scope.row.name}}</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="age" label="年龄" />
|
||||||
|
<el-table-column prop="sex" label="性别" />
|
||||||
|
<el-table-column prop="price" label="价格" />
|
||||||
|
<el-table-column prop="admin" label="账号" />
|
||||||
|
<el-table-column prop="address" label="地址" />
|
||||||
|
<el-table-column prop="date" label="日期" />
|
||||||
|
<el-table-column prop="province" label="省份" />
|
||||||
|
<el-table-column prop="city" label="城市" />
|
||||||
|
<el-table-column prop="operator" label="操作" width="180px" >
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button
|
||||||
|
v-if="scope.row.edit"
|
||||||
|
type="success"
|
||||||
|
size="small"
|
||||||
|
icon="CircleCheckFilled"
|
||||||
|
@click="confirmEdit(scope.row)"
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-else
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
icon="Edit"
|
||||||
|
@click="scope.row.edit=!scope.row.edit"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
size="small"
|
||||||
|
icon="Delete"
|
||||||
|
@click="deleteAction(scope.row)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {ref} from "vue";
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: '',
|
||||||
|
price: 0,
|
||||||
|
province: '上海',
|
||||||
|
admin:"admin",
|
||||||
|
sex:'1',
|
||||||
|
checked:true,
|
||||||
|
id:"20",
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
age:0,
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普上海',
|
||||||
|
zip: 200333
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: '王小虎2',
|
||||||
|
province: '上海',
|
||||||
|
sex:'0',
|
||||||
|
price: 0,
|
||||||
|
id:"2",
|
||||||
|
age:12,
|
||||||
|
city: '普陀区',
|
||||||
|
img:"https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2022-03-25T09:27:42',
|
||||||
|
name: '王小虎3',
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
price: 33,
|
||||||
|
id:"3",
|
||||||
|
age:'15',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333555
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-04-02',
|
||||||
|
name: '王小虎4',
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
age:'11',
|
||||||
|
price: 33,
|
||||||
|
id:"4",
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-03-02',
|
||||||
|
name: '王小虎5',
|
||||||
|
province: '上海',
|
||||||
|
price: 0,
|
||||||
|
sex:1,
|
||||||
|
age:'14',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
id:"5",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2014-05-02',
|
||||||
|
name: '王小虎6',
|
||||||
|
province: '上海',
|
||||||
|
price: 33,
|
||||||
|
sex:1,
|
||||||
|
id:"6",
|
||||||
|
age:'12',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 0
|
||||||
|
},{
|
||||||
|
date: '2019-05-02',
|
||||||
|
name: '王小虎7',
|
||||||
|
price: 33,
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
age:0,
|
||||||
|
id:"7",
|
||||||
|
city: '普陀区',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2012-05-02',
|
||||||
|
name: '王小虎8',
|
||||||
|
province: '上海',
|
||||||
|
price: 0,
|
||||||
|
sex:1,
|
||||||
|
age:'29',
|
||||||
|
id:"8",
|
||||||
|
city: '普陀区',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2011-05-02',
|
||||||
|
name: '王小虎91',
|
||||||
|
price: 33,
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
id:"9",
|
||||||
|
age:'30',
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2011-05-02',
|
||||||
|
name: '王小虎10',
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
id:"10",
|
||||||
|
age:'30',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2011-05-02',
|
||||||
|
name: '王小虎20',
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
price: 33,
|
||||||
|
id:"11",
|
||||||
|
age:'30',
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const list = ref(data)
|
||||||
|
const listLoading = ref(false)
|
||||||
|
|
||||||
|
const confirmEdit = (row)=>{
|
||||||
|
row.edit = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancelEdit = (row)=>{
|
||||||
|
row.edit = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteAction = (row)=>{
|
||||||
|
|
||||||
|
list.value = list.value.filter(item=>item.id!==row.id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.edit-input {
|
||||||
|
padding-right: 100px;
|
||||||
|
}
|
||||||
|
.cancel-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-table :data="list" style="width: 100%">
|
||||||
|
<el-table-column prop="date" label="Date" width="150" />
|
||||||
|
<el-table-column label="Delivery Info">
|
||||||
|
<el-table-column prop="name" label="Name" width="120" />
|
||||||
|
<el-table-column label="Address Info">
|
||||||
|
<el-table-column prop="state" label="State" width="120" />
|
||||||
|
<el-table-column prop="city" label="City" width="120" />
|
||||||
|
<el-table-column prop="address" label="Address" />
|
||||||
|
<el-table-column prop="zip" label="Zip" width="120" />
|
||||||
|
</el-table-column>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: '',
|
||||||
|
price: 0,
|
||||||
|
province: '上海',
|
||||||
|
admin:"admin",
|
||||||
|
sex:'1',
|
||||||
|
checked:true,
|
||||||
|
id:"20",
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
age:0,
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普上海市普上海市普上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: '王小虎2',
|
||||||
|
province: '上海',
|
||||||
|
sex:'0',
|
||||||
|
price: 0,
|
||||||
|
id:"2",
|
||||||
|
age:12,
|
||||||
|
city: '普陀区',
|
||||||
|
img:"https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2022-03-25T09:27:42',
|
||||||
|
name: '王小虎3',
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
price: 33,
|
||||||
|
id:"3",
|
||||||
|
age:'15',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333555
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-04-02',
|
||||||
|
name: '王小虎4',
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
age:'11',
|
||||||
|
price: 33,
|
||||||
|
id:"4",
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-03-02',
|
||||||
|
name: '王小虎5',
|
||||||
|
province: '上海',
|
||||||
|
price: 0,
|
||||||
|
sex:1,
|
||||||
|
age:'14',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
id:"5",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2014-05-02',
|
||||||
|
name: '王小虎6',
|
||||||
|
province: '上海',
|
||||||
|
price: 33,
|
||||||
|
sex:1,
|
||||||
|
id:"6",
|
||||||
|
age:'12',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 0
|
||||||
|
},{
|
||||||
|
date: '2019-05-02',
|
||||||
|
name: '王小虎7',
|
||||||
|
price: 33,
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
age:0,
|
||||||
|
id:"7",
|
||||||
|
city: '普陀区',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2012-05-02',
|
||||||
|
name: '王小虎8',
|
||||||
|
province: '上海',
|
||||||
|
price: 0,
|
||||||
|
sex:1,
|
||||||
|
age:'29',
|
||||||
|
id:"8",
|
||||||
|
city: '普陀区',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2011-05-02',
|
||||||
|
name: '王小虎91',
|
||||||
|
price: 33,
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
id:"9",
|
||||||
|
age:'30',
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2011-05-02',
|
||||||
|
name: '王小虎10',
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
id:"10",
|
||||||
|
age:'30',
|
||||||
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
},{
|
||||||
|
date: '2011-05-02',
|
||||||
|
name: '王小虎20',
|
||||||
|
province: '上海',
|
||||||
|
sex:1,
|
||||||
|
price: 33,
|
||||||
|
id:"11",
|
||||||
|
age:'30',
|
||||||
|
city: '普陀区',
|
||||||
|
address: '上海市普',
|
||||||
|
zip: 200333
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const list = ref(data)
|
||||||
|
const listLoading = ref(false)
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.edit-input {
|
||||||
|
padding-right: 100px;
|
||||||
|
}
|
||||||
|
.cancel-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue