From f7e677eedbcc7cf84dba8cbbc6f8921c89801ec6 Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Wed, 20 Apr 2022 15:53:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                             |  14 +-
 src/permission.js                     |   3 -
 src/router/index.ts                   |   5 +-
 src/router/modules/table.ts           |  31 ++++
 src/views/table/inline-edit-table.vue | 237 ++++++++++++++++++++++++++
 src/views/table/multi-table.vue       | 172 +++++++++++++++++++
 6 files changed, 457 insertions(+), 5 deletions(-)
 create mode 100644 src/router/modules/table.ts
 create mode 100644 src/views/table/inline-edit-table.vue
 create mode 100644 src/views/table/multi-table.vue

diff --git a/README.md b/README.md
index bfa96e0..7996c67 100644
--- a/README.md
+++ b/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
 
+## 实现功能
+- 登录逻辑
+- 权限校验
+- 侧边栏导航显示
+- 打印
+- 地图
+- 头像裁剪
+- 无限滚动
+- 多标签显示
+- 退出
+- 其他各组件
+
 ## 开发
 ```
 # 克隆项目
diff --git a/src/permission.js b/src/permission.js
index e46e30e..a791914 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -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) {
diff --git a/src/router/index.ts b/src/router/index.ts
index 16c9f6f..0fdc722 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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,
+
 ]
 
 
diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts
new file mode 100644
index 0000000..024fad3
--- /dev/null
+++ b/src/router/modules/table.ts
@@ -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
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/inline-edit-table.vue
new file mode 100644
index 0000000..57b5982
--- /dev/null
+++ b/src/views/table/inline-edit-table.vue
@@ -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>
diff --git a/src/views/table/multi-table.vue b/src/views/table/multi-table.vue
new file mode 100644
index 0000000..5242739
--- /dev/null
+++ b/src/views/table/multi-table.vue
@@ -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>