增加表格
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)
|
||||
|
||||
|
|
@ -30,6 +30,18 @@ vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-p
|
|||
## 技术栈
|
||||
vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
|
||||
|
||||
## 实现功能
|
||||
- 登录逻辑
|
||||
- 权限校验
|
||||
- 侧边栏导航显示
|
||||
- 打印
|
||||
- 地图
|
||||
- 头像裁剪
|
||||
- 无限滚动
|
||||
- 多标签显示
|
||||
- 退出
|
||||
- 其他各组件
|
||||
|
||||
## 开发
|
||||
```
|
||||
# 克隆项目
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ router.beforeEach(async(to, from, next) => {
|
|||
} else {
|
||||
try {
|
||||
// 路由添加进去了没有及时更新 需要重新进去一次拦截
|
||||
|
||||
if(!store.state.permission.routes.length){
|
||||
// 获取权限列表进行接口访问 因为这里页面要切换权限
|
||||
// const roles = await store.dispatch('user/getInfo')
|
||||
|
|
@ -42,8 +41,6 @@ router.beforeEach(async(to, from, next) => {
|
|||
} catch (error) {
|
||||
next(`/login?redirect=${to.path}`)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}else{
|
||||
if (whiteList.indexOf(to.path) !== -1) {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import componentsRouter from './modules/components'
|
|||
import othersRouter from './modules/other'
|
||||
import externalLink from './modules/externalLink'
|
||||
import permissionRouter from './modules/permission'
|
||||
import tableRouter from './modules/table'
|
||||
|
||||
|
||||
interface extendRoute {
|
||||
|
|
@ -45,8 +46,10 @@ export const asyncRoutes = [
|
|||
chatRouter,
|
||||
componentsRouter,
|
||||
othersRouter,
|
||||
tableRouter,
|
||||
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