From 78d1639148f2becb10ad286596d8611c944a45fc Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Tue, 26 Apr 2022 15:32:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                    |   2 +-
 pushp.sh                                     |  12 -
 src/router/modules/table.ts                  |  10 +-
 src/views/components-demo/button.vue         | 254 ++++++++++---------
 src/views/other/print.vue                    |  26 +-
 src/views/other/splitpane.vue                |  24 +-
 src/views/table/complex.vue                  |  28 +-
 src/views/table/components/comprehensive.vue |  43 ++--
 src/views/table/components/edit.vue          | 153 +++++++++++
 src/views/table/edit.vue                     |  50 ++++
 10 files changed, 412 insertions(+), 190 deletions(-)
 delete mode 100644 pushp.sh
 create mode 100644 src/views/table/components/edit.vue
 create mode 100644 src/views/table/edit.vue

diff --git a/README.md b/README.md
index 7996c67..9dc36a2 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/index.html#/home)
+国内预览地址 [项目预览地址](http://182.61.5.190:8889/#/table/complex)
 
 附上github地址 [vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)
 
diff --git a/pushp.sh b/pushp.sh
deleted file mode 100644
index 95128f5..0000000
--- a/pushp.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#强制推送
-#!/usr/bin/env bash
-set -e
-git init
-git add -A
-git commit -m '🎉 发布新版本'
-git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git"  master:gh-pages
-exec /bin/bash
-
-
-
-
diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts
index 26fed7a..e310cff 100644
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@@ -20,11 +20,17 @@ const tableRouter = {
             meta: { title: '综合表格', noCache: true }
         },
         {
-            path: 'edit-table',
+            path: 'inline-table',
             component: () => import('@/views/table/inline-edit-table.vue'),
-            name: 'edit-table',
+            name: 'inline-table',
             meta: { title: '行内编辑', noCache: true  }
         },
+        {
+            path: 'edit-table',
+            component: () => import('@/views/table/edit.vue'),
+            name: 'edit-table',
+            meta: { title: '可编辑表格', noCache: true  }
+        },
         // {
         //     path: 'multi-table',
         //     component: () => import('@/views/table/multi-table.vue'),
diff --git a/src/views/components-demo/button.vue b/src/views/components-demo/button.vue
index 72fd179..a38239a 100644
--- a/src/views/components-demo/button.vue
+++ b/src/views/components-demo/button.vue
@@ -1,129 +1,130 @@
 <template>
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
+  <div>
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
         <span>基础用法
       </span>
+        </div>
+      </template>
+      <div>
+        <el-button class="item">Default</el-button>
+        <el-button type="primary"  class="item">Primary</el-button>
+        <el-button type="success"  class="item">Success</el-button>
+        <el-button type="info"  class="item">Info</el-button>
+        <el-button type="warning"  class="item">Warning</el-button>
+        <el-button type="danger"  class="item">Danger</el-button>
+        <el-button  class="item">中文</el-button>
+        <el-button plain  class="item">Plain</el-button>
+        <el-button type="primary" plain  class="item">Primary</el-button>
+        <el-button type="success" plain  class="item">Success</el-button>
+        <el-button type="info" plain  class="item">Info</el-button>
+        <el-button type="warning" plain  class="item">Warning</el-button>
+        <el-button type="danger" plain  class="item">Danger</el-button>
+        <el-button round  class="item">Round</el-button>
+        <el-button type="primary" round  class="item">Primary</el-button>
+        <el-button type="success" round  class="item">Success</el-button>
+        <el-button type="info" round  class="item">Info</el-button>
+        <el-button type="warning" round  class="item">Warning</el-button>
+        <el-button type="danger" round  class="item">Danger</el-button>
+        <el-button :icon="Search" circle  class="item"/>
+        <el-button type="primary" :icon="Edit" circle  class="item"/>
+        <el-button type="success" :icon="Check" circle  class="item"/>
+        <el-button type="info" :icon="Message" circle  class="item"/>
+        <el-button type="warning" :icon="Star" circle  class="item"/>
+        <el-button type="danger" :icon="Delete" circle  class="item"/>
       </div>
-    </template>
-    <div>
-      <el-button class="item">Default</el-button>
-      <el-button type="primary"  class="item">Primary</el-button>
-      <el-button type="success"  class="item">Success</el-button>
-      <el-button type="info"  class="item">Info</el-button>
-      <el-button type="warning"  class="item">Warning</el-button>
-      <el-button type="danger"  class="item">Danger</el-button>
-      <el-button  class="item">中文</el-button>
-      <el-button plain  class="item">Plain</el-button>
-      <el-button type="primary" plain  class="item">Primary</el-button>
-      <el-button type="success" plain  class="item">Success</el-button>
-      <el-button type="info" plain  class="item">Info</el-button>
-      <el-button type="warning" plain  class="item">Warning</el-button>
-      <el-button type="danger" plain  class="item">Danger</el-button>
-      <el-button round  class="item">Round</el-button>
-      <el-button type="primary" round  class="item">Primary</el-button>
-      <el-button type="success" round  class="item">Success</el-button>
-      <el-button type="info" round  class="item">Info</el-button>
-      <el-button type="warning" round  class="item">Warning</el-button>
-      <el-button type="danger" round  class="item">Danger</el-button>
-      <el-button :icon="Search" circle  class="item"/>
-      <el-button type="primary" :icon="Edit" circle  class="item"/>
-      <el-button type="success" :icon="Check" circle  class="item"/>
-      <el-button type="info" :icon="Message" circle  class="item"/>
-      <el-button type="warning" :icon="Star" circle  class="item"/>
-      <el-button type="danger" :icon="Delete" circle  class="item"/>
-    </div>
-  </el-card>
+    </el-card>
 
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
         <span>禁用状态
       </span>
+        </div>
+      </template>
+      <div>
+        <el-button disabled class="item">Default</el-button>
+        <el-button type="primary" disabled class="item">Primary</el-button>
+        <el-button type="success" disabled class="item">Success</el-button>
+        <el-button type="info" disabled class="item">Info</el-button>
+        <el-button type="warning" disabled class="item">Warning</el-button>
+        <el-button type="danger" disabled class="item">Danger</el-button>
+        <el-button plain disabled class="item">Plain</el-button>
+        <el-button type="primary" plain disabled class="item">Primary</el-button>
+        <el-button type="success" plain disabled class="item">Success</el-button>
+        <el-button type="info" plain disabled class="item"> Info</el-button>
+        <el-button type="warning" plain disabled class="item">Warning</el-button>
+        <el-button type="danger" plain disabled class="item">Danger</el-button>
       </div>
-    </template>
-    <div>
-      <el-button disabled class="item">Default</el-button>
-      <el-button type="primary" disabled class="item">Primary</el-button>
-      <el-button type="success" disabled class="item">Success</el-button>
-      <el-button type="info" disabled class="item">Info</el-button>
-      <el-button type="warning" disabled class="item">Warning</el-button>
-      <el-button type="danger" disabled class="item">Danger</el-button>
-      <el-button plain disabled class="item">Plain</el-button>
-      <el-button type="primary" plain disabled class="item">Primary</el-button>
-      <el-button type="success" plain disabled class="item">Success</el-button>
-      <el-button type="info" plain disabled class="item"> Info</el-button>
-      <el-button type="warning" plain disabled class="item">Warning</el-button>
-      <el-button type="danger" plain disabled class="item">Danger</el-button>
-    </div>
-  </el-card>
+    </el-card>
 
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
         <span>文字按钮
       </span>
+        </div>
+      </template>
+      <div>
+        <el-button type="text" class="item">文字按钮</el-button>
+        <el-button type="text" disabled class="item">文字按钮</el-button>
       </div>
-    </template>
-    <div>
-      <el-button type="text" class="item">文字按钮</el-button>
-      <el-button type="text" disabled class="item">文字按钮</el-button>
-    </div>
-  </el-card>
+    </el-card>
 
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
         <span>图标按钮
       </span>
+        </div>
+      </template>
+      <div>
+        <el-button type="primary" :icon="Edit" class="item"/>
+        <el-button type="primary" :icon="Share" class="item"/>
+        <el-button type="primary" :icon="Delete" class="item"/>
+        <el-button type="primary" :icon="Search" class="item">Search</el-button>
+        <el-button type="primary" class="item">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
       </div>
-    </template>
-    <div>
-      <el-button type="primary" :icon="Edit" class="item"/>
-      <el-button type="primary" :icon="Share" class="item"/>
-      <el-button type="primary" :icon="Delete" class="item"/>
-      <el-button type="primary" :icon="Search" class="item">Search</el-button>
-      <el-button type="primary" class="item">
-        Upload<el-icon class="el-icon--right"><Upload /></el-icon>
-      </el-button>
-    </div>
-  </el-card>
+    </el-card>
 
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
         <span>按钮组
       </span>
+        </div>
+      </template>
+      <div>
+        <el-button type="primary" icon="ArrowLeft" class="item">上一页</el-button>
+        <el-button type="primary" class="item">
+          下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
+        </el-button>
+        <el-button type="primary" :icon="Edit" class="item"/>
+        <el-button type="primary" :icon="Share" class="item"/>
+        <el-button type="primary" :icon="Delete" class="item"/>
       </div>
-    </template>
-    <div>
-      <el-button type="primary" :icon="ArrowLeft" class="item">上一页</el-button>
-      <el-button type="primary" class="item">
-        下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
-      </el-button>
-      <el-button type="primary" :icon="Edit" class="item"/>
-      <el-button type="primary" :icon="Share" class="item"/>
-      <el-button type="primary" :icon="Delete" class="item"/>
-    </div>
-  </el-card>
+    </el-card>
 
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
         <span>加载中
       </span>
-      </div>
-    </template>
-    <div>
-      <el-button type="primary" loading class="item">Loading</el-button>
-      <el-button type="primary" :loading-icon="Eleme" loading class="item">Loading</el-button>
-      <el-button type="primary" loading class="item">
-        <template #loading>
-          <div class="custom-loading">
-            <svg class="circular" viewBox="-10, -10, 50, 50">
-              <path
-                  class="path"
-                  d="
+        </div>
+      </template>
+      <div>
+        <el-button type="primary" loading class="item">Loading</el-button>
+        <el-button type="primary" loading-icon="Eleme" loading class="item">Loading</el-button>
+        <el-button type="primary" loading class="item">
+          <template #loading>
+            <div class="custom-loading">
+              <svg class="circular" viewBox="-10, -10, 50, 50">
+                <path
+                    class="path"
+                    d="
             M 30 15
             L 28 17
             M 25.61 25.61
@@ -131,34 +132,35 @@
             A 15 15, 0, 1, 1, 27.99 7.5
             L 15 15
           "
-                  style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
-              />
-            </svg>
-          </div>
-        </template>
-        Loading
-      </el-button>
-    </div>
-  </el-card>
+                    style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
+                />
+              </svg>
+            </div>
+          </template>
+          Loading
+        </el-button>
+      </div>
+    </el-card>
 
 
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
         <span>自定义颜色
       </span>
-      </div>
-    </template>
-    <div>
-      <el-button color="#626aef" :dark="isDark" class="item">Default</el-button>
-      <el-button color="#626aef" :dark="isDark" plain class="item">Plain</el-button>
+        </div>
+      </template>
+      <div>
+        <el-button color="#626aef"  class="item">Default</el-button>
+        <el-button color="#626aef"  plain class="item">Plain</el-button>
 
-      <el-button color="#626aef" :dark="isDark" disabled class="item">Disabled</el-button>
-      <el-button color="#626aef" :dark="isDark" disabled plain class="item"
-      >Disabled Plain</el-button
-      >
-    </div>
-  </el-card>
+        <el-button color="#626aef"  disabled class="item">Disabled</el-button>
+        <el-button color="#626aef" disabled plain class="item"
+        >Disabled Plain</el-button
+        >
+      </div>
+    </el-card>
+  </div>
 </template>
 <script lang="ts" setup>
 import {
diff --git a/src/views/other/print.vue b/src/views/other/print.vue
index 2b4864f..7602db4 100644
--- a/src/views/other/print.vue
+++ b/src/views/other/print.vue
@@ -1,17 +1,19 @@
 <template>
   <div>
-    <el-button type="primary" @click="print(1)">打印图片</el-button>
-    <el-button type="primary" @click="print(2)">打印表格</el-button>
-  </div>
-  <div style="margin-top: 20px">
-    <img :src="im1" style="width: 50%;"/>
-  </div>
-  <div>
-    <el-table :data="tableData" style="width: 100%">
-      <el-table-column prop="date" label="日期" width="180" />
-      <el-table-column prop="name" label="名字" width="180" />
-      <el-table-column prop="address" label="地址" />
-    </el-table>
+    <div>
+      <el-button type="primary" @click="print(1)">打印图片</el-button>
+      <el-button type="primary" @click="print(2)">打印表格</el-button>
+    </div>
+    <div style="margin-top: 20px">
+      <img :src="im1" style="width: 50%;"/>
+    </div>
+    <div>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="日期" width="180" />
+        <el-table-column prop="name" label="名字" width="180" />
+        <el-table-column prop="address" label="地址" />
+      </el-table>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/other/splitpane.vue b/src/views/other/splitpane.vue
index f4c0f79..2194fce 100644
--- a/src/views/other/splitpane.vue
+++ b/src/views/other/splitpane.vue
@@ -1,15 +1,17 @@
 <template>
-  <splitpanes style="height: 800px">
-    <pane min-size="20" class="left">1</pane>
-    <pane>
-      <splitpanes horizontal>
-        <pane class="item1">2</pane>
-        <pane class="item2">3</pane>
-        <pane class="item3">4</pane>
-      </splitpanes>
-    </pane>
-    <pane class="item4">5</pane>
-  </splitpanes>
+  <div>
+    <splitpanes style="height: 800px">
+      <pane min-size="20" class="left">1</pane>
+      <pane>
+        <splitpanes horizontal>
+          <pane class="item1">2</pane>
+          <pane class="item2">3</pane>
+          <pane class="item3">4</pane>
+        </splitpanes>
+      </pane>
+      <pane class="item4">5</pane>
+    </splitpanes>
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/table/complex.vue b/src/views/table/complex.vue
index fb4bfb0..7cb6ba6 100644
--- a/src/views/table/complex.vue
+++ b/src/views/table/complex.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <comprehensive :columns="column">
+    <comprehensive :columns="column" :data="data" @reset="reset" @onSubmit="onSubmit">
       <template v-slot:btn>
        <div style="display: flex;justify-content: flex-end">
          <el-button type="primary"><el-icon><plus /></el-icon> 添加</el-button>
@@ -32,7 +32,23 @@
   import {ref} from "vue";
   import { ElMessage } from 'element-plus'
   import Comprehensive from './components/comprehensive.vue'
-
+  const data = []
+  for(let i=0;i<100;i++){
+    data.push({
+      date: '2016-05-02',
+      name: '王五'+i,
+      price: 1+i,
+      province: '上海',
+      admin:"admin",
+      sex:i%2?1:0,
+      checked:true,
+      id:i+1,
+      age:0,
+      city: '普陀区',
+      address: '上海市普上海',
+      zip: 200333
+    })
+  }
   const column = [
     { type:'selection', width:60 },
     { name: 'id', label: 'id',width:80, },
@@ -77,6 +93,14 @@
     { name: 'operation',slot:true,fixed:'right',width:200 }
   ]
 
+  const reset = ()=>{
+    ElMessage.success('触发重置方法')
+  }
+  const onSubmit = (val)=>{
+    console.log('val===',val)
+    ElMessage.success('触发查询方法')
+  }
+
 </script>
 <style scoped>
 .edit-input {
diff --git a/src/views/table/components/comprehensive.vue b/src/views/table/components/comprehensive.vue
index 3dc84fe..7948d1a 100644
--- a/src/views/table/components/comprehensive.vue
+++ b/src/views/table/components/comprehensive.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="inline-edit-table">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline"  ref="ruleFormRef">
       <template v-for="item,index in formSearchData" :key="index">
           <el-form-item :label="item.label" v-show="isExpand?isExpand:index<2">
             <template v-if="item.valueType==='input'">
@@ -20,7 +20,8 @@
           </el-form-item>
       </template>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">搜索</el-button>
+        <el-button  @click="reset(ruleFormRef)">重置</el-button>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
         <el-button type="text" @click="isExpand=!isExpand">{{ isExpand?'合并':'展开' }}<el-icon>
           <arrow-down v-if="!isExpand"/>
           <arrow-up  v-else/>
@@ -63,28 +64,17 @@
 <script lang="ts" setup>
 import {computed, ref} from "vue";
 import { ElMessage,ElMessageBox  } from 'element-plus'
-const data = []
-for(let i=0;i<100;i++){
-  data.push({
-    date: '2016-05-02',
-    name: '王五'+i,
-    price: 1+i,
-    province: '上海',
-    admin:"admin",
-    sex:i%2?1:0,
-    checked:true,
-    id:i+1,
-    age:0,
-    city: '普陀区',
-    address: '上海市普上海',
-    zip: 200333
-  })
-}
-
+import type { FormInstance } from 'element-plus'
+const ruleFormRef = ref<FormInstance>()
+const emit = defineEmits(['reset','onSubmit'])
 let props = defineProps({
   columns:{
     type:Array,
     default:()=>[]
+  },
+  data:{
+    type:Array,
+    default:()=>[]
   }
 })
 
@@ -101,10 +91,11 @@ const handleCurrentChange = (val: number) => {
 }
 
 const list = computed(()=>{
-  let arr = JSON.parse(JSON.stringify(data))
+  let arr = JSON.parse(JSON.stringify(props.data))
   return arr.splice((currentPage1.value-1)*10,10)
 })
 
+
 const listLoading = ref(false)
 const confirmEdit = (row)=>{
   row.edit = false
@@ -130,8 +121,15 @@ const formInline = reactive(obj)
 
 const onSubmit = () => {
   console.log('submit!',formInline)
+  emit('onSubmit',formInline)
 }
 
+const reset = (formEl: FormInstance | undefined)=>{
+  formSearchData.value.forEach(item=>{
+    formInline[item.name] = null
+  })
+  emit('reset')
+}
 const deleteAction = (row)=>{
   ElMessageBox.confirm(
       '你确定要删除当前项吗?',
@@ -153,9 +151,6 @@ const deleteAction = (row)=>{
 
 }
 
-const expand = (type)=>{
-
-}
 
 </script>
 <style scoped>
diff --git a/src/views/table/components/edit.vue b/src/views/table/components/edit.vue
new file mode 100644
index 0000000..5a4d0bb
--- /dev/null
+++ b/src/views/table/components/edit.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="m-edit-table">
+    <el-table :data="list" style="width: 100%" >
+      <template v-for="item in columns" >
+        <el-table-column v-if="item.type" :type="item.type"  :width="item.width" :align="item.align" :fixed="item.fixed" :label="item.label"/>
+        <el-table-column
+            v-else
+            :prop="item.name" :width="item.width" :align="item.align" :fixed="item.fixed" :label="item.label">
+          <template #default="scope">
+            <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
+            <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column prop="operator" label="操作" width="180px" fixed="right">
+        <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 {computed, ref} from "vue";
+import { ElMessage,ElMessageBox  } from 'element-plus'
+
+
+const props = defineProps({
+  columns:{
+    type:Array,
+    default:()=>[]
+  }
+})
+
+const data = [
+]
+for(let i=0;i<100;i++){
+  data.push({
+    date: '2016-05-02',
+    name: '王五'+i,
+    price: 1+i,
+    province: '上海',
+    admin:"admin",
+    sex:i%2?1:0,
+    checked:true,
+    id:i+1,
+    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
+  })
+}
+
+const currentPage1 = ref(1)
+const handleSizeChange = (val: number) => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  currentPage1.value = val
+}
+
+const list = computed(()=>{
+  let arr = JSON.parse(JSON.stringify(data))
+  return arr.splice((currentPage1.value-1)*10,10)
+})
+
+
+const listLoading = ref(false)
+
+const confirmEdit = (row)=>{
+  row.edit = false
+}
+
+const cancelEdit = (row)=>{
+  row.edit = false
+}
+
+import { reactive } from 'vue'
+
+const formInline = reactive({
+  user: '',
+  region: '',
+})
+
+const onSubmit = () => {
+  console.log('submit!')
+}
+
+const deleteAction = (row)=>{
+  ElMessageBox.confirm(
+      '你确定要删除当前项吗?',
+      '温馨提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        draggable: true,
+      }
+  )
+      .then(() => {
+        list.value = list.value.filter(item=>item.id!==row.id)
+        ElMessage.success('删除成功')
+      })
+      .catch(() => {
+
+      })
+
+}
+
+</script>
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+.inline-edit-table{
+  width: 100%;
+}
+</style>
diff --git a/src/views/table/edit.vue b/src/views/table/edit.vue
new file mode 100644
index 0000000..f1d8e51
--- /dev/null
+++ b/src/views/table/edit.vue
@@ -0,0 +1,50 @@
+<template>
+    <edit-table :columns="column"/>
+</template>
+
+<script lang="ts" setup>
+import EditTable from './components/edit.vue'
+
+const column = [
+  { name: 'id', label: 'id',width:80, },
+  { name: 'name',
+    label: '活动名称',
+    width:80
+  },
+  { name: 'status',
+    label: '状态',
+  },
+  {
+    name: 'decs',
+    label: '描述',
+    slot:true,
+    inSearch:true,
+    options:[
+      {
+        value:-1,
+        label:'全部'
+      },
+     {
+      value:1,
+      label:'未解决'
+    },{
+      value:0,
+      label:'已解决'
+    }],
+    valueType:'select',
+  },
+  {
+    name: 'created_at',
+    label: '活动时间',
+    inSearch:true,
+    valueType:'input',
+  },
+  { name: 'operation',slot:true,fixed:'right',width:200 }
+]
+
+
+</script>
+
+<style>
+
+</style>