假界面

components.d.ts

@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' {
     Dropzone: typeof import('./src/components/Dropzone/index.vue')['default']
     EditorImage: typeof import('./src/components/Tinymce/components/EditorImage.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -36,6 +37,7 @@ declare module '@vue/runtime-core' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']

src/views/error-log/index.vue

@@ -1,33 +1,219 @@
+
 <template>
-  <div class="errPage-container">
+
-    <ErrorA />
+    <div style=" width:100%">
-    <ErrorB />
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
-    <h3>Please click the bug icon in the upper right corner</h3>
+            <template #header><span>消息</span></template>
-    <aside>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
-      Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
+                <div>
-      <a target="_blank" class="link-type" href="https://vue3-element-admin-site.midfar.com/guide/advanced/error.html">
+                    时间
-        Document introduction
+                    <el-date-picker
-      </a>
+                        v-model="value2"
-    </aside>
+                        type="daterange"
-    <a href="#">
+                        unlink-panels
-      <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
+                        range-separator="To"
-    </a>
+                        start-placeholder="开始时间"
-  </div>
+                        end-placeholder="结束时间"
+                        :shortcuts="shortcuts"
+                        :size="large"
+                    />
+                </div>
+                <div>
+                    状态
+                    <el-select
+                        v-model="value"
+                        clearable
+                        placeholder="Select"
+                        style="width: 240px"
+                    >
+                        <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+
+                </div>
+
+                <div>
+                    <el-button type="primary">查询</el-button>
+                    <el-button>重置</el-button>
+
+                </div>
+            </div>
+        </el-card>
+        <el-card style="max-width: 100vw;height:50vh;margin:1.3vw">
+            <div style="display:flex;flex-direction: row;justify-content: space-between">
+                <el-button
+                        text
+                        type=''
+                >历史记录</el-button
+                >
+            </div>
+
+            <div v-for="(row, index) in tableData" :key="index" class="table-row">
+                <div class="table-cell">
+                    <div class="date" style="display:flex;flex-direction: column">
+                        <span style="color:skyblue">{{row.name}}</span>
+                        <span>{{ row.date }}</span>
+                    </div>
+                </div>
+                <div class="table-cell">
+                            <div>address: {{ row.address }}</div>
+                </div>
+                <div class="table-cell table-cell-right">
+                    <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
+                </div>
+            </div>
+            <el-pagination
+
+                background
+                layout="prev, pager, next"
+                :total="50"
+                class="mt-[5vh]"
+            />
+        </el-card>
+
+    </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { ref } from 'vue';
-import ErrorA from './components/ErrorTestA';
+// 时间选择器
-import ErrorB from './components/ErrorTestB';
 
-export default defineComponent({
+const value2 = ref('');
-  name: 'ErrorLog',
-  components: { ErrorA, ErrorB }
-});
-</script>
 
-<style scoped>
+const shortcuts = [
-  .errPage-container {
+  {
-    padding: 30px;
+    text: 'Last week',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
   }
+];
+
+// 状态选择器
+
+const value = ref('');
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1'
+  },
+  {
+    value: 'Option2',
+    label: 'Option2'
+  },
+  {
+    value: 'Option3',
+    label: 'Option3'
+  },
+  {
+    value: 'Option4',
+    label: 'Option4'
+  },
+  {
+    value: 'Option5',
+    label: 'Option5'
+  }
+];
+
+// 表格
+interface User {
+    date: string
+    name: string
+    address: string
+}
+
+const handleDelete = (index: number, row: User) => {
+  console.log(index, row);
+};
+
+const tableData: User[] = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+];
+</script>
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+
+.table-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.table-cell {
+    flex: 1;
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.table-cell-right {
+    justify-content: flex-end;
+    margin-right:5vw;
+}
+.date {
+    display: flex;
+    /*align-items: center;*/
+}
+
+.date el-icon {
+    margin-right: 10px;
+}
 </style>

src/views/tab/index.vue

@@ -60,11 +60,50 @@
 <template>
 
     <div style=" width:100%">
-        <el-card style="max-width: 100vw;margin: 1.5vw">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
             <template #header><span>日报</span></template>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+            <div>
+                项目
+                <el-autocomplete
+                    v-model="state"
+                    :fetch-suggestions="querySearch"
+                    popper-class="my-autocomplete"
+                    placeholder="Please input"
+                    @select="handleSelect"
+                >
+                    <template #suffix>
+                        <el-icon class="el-input__icon" @click="handleIconClick">
+                            <edit />
+                        </el-icon>
+                    </template>
+                    <template #default="{ item }">
+                        <div class="value">{{ item.value }}</div>
+                        <span class="link">{{ item.link }}</span>
+                    </template>
+                </el-autocomplete>
+            </div>
+           <div>
+               时间
+               <el-date-picker
+                   v-model="value2"
+                   type="daterange"
+                   unlink-panels
+                   range-separator="To"
+                   start-placeholder="开始时间"
+                   end-placeholder="结束时间"
+                   :shortcuts="shortcuts"
+                   :size="large"
+               />
+           </div>
+           <div>
+               <el-button type="primary">查询</el-button>
+               <el-button>重置</el-button>
 
+           </div>
+            </div>
         </el-card>
-        <el-card style="max-width: 100vw;height:70vh;margin:1.3vw">
+        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
             <div style="display:flex;flex-direction: row;justify-content: space-between">
                 <el-button
                     text
@@ -149,4 +188,103 @@ const tableData: User[] = [
   }
 
 ];
+
+// 输入框1
+import { onMounted } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+  const results = queryString
+    ? links.value.filter(createFilter(queryString))
+    : links.value;
+    // call callback function to return suggestion objects
+  cb(results);
+};
+const createFilter = (queryString) => {
+  return (restaurant) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    );
+  };
+};
+const loadAll = () => {
+  return [
+    { value: '1' },
+    { value: '2' },
+    { value: '3' },
+    { value: '4' },
+    { value: '5' }
+
+  ];
+};
+const handleSelect = (item: LinkItem) => {
+  console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+  console.log(ev);
+};
+
+onMounted(() => {
+  links.value = loadAll();
+});
+
+// 时间选择器
+const value1 = ref('');
+const value2 = ref('');
+
+const shortcuts = [
+  {
+    text: 'Last week',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
 </script>
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>

src/views/table/dynamic-table/index.vue

@@ -1,25 +1,238 @@
-<template>
+<!--<template>-->
-  <div class="app-container">
+<!--    -->
-    <div style="margin:0 0 5px 20px">
+<!--  <div class="app-container">-->
-      Fixed header, sorted by header order,
+<!--    <div style="margin:0 0 5px 20px">-->
-    </div>
+<!--      Fixed header, sorted by header order,-->
-    <fixed-thead />
+<!--    </div>-->
+<!--    <fixed-thead />-->
 
-    <div style="margin:30px 0 5px 20px">
+<!--    <div style="margin:30px 0 5px 20px">-->
-      Not fixed header, sorted by click order
+<!--      Not fixed header, sorted by click order-->
+<!--    </div>-->
+<!--    <unfixed-thead />-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import { defineComponent } from 'vue';-->
+<!--import FixedThead from './components/FixedThead';-->
+<!--import UnfixedThead from './components/UnfixedThead';-->
+
+<!--export default defineComponent({-->
+<!--  name: 'DynamicTable',-->
+<!--  components: { FixedThead, UnfixedThead }-->
+<!--});-->
+<!--</script>-->
+
+<template>
+
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
+            <template #header><span>项目1</span></template>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+                <div>
+                    名称
+                    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+                </div>
+                <div>
+                    状态
+                    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+                </div>
+                <div>
+                    <el-button type="primary">查询</el-button>
+                    <el-button>重置</el-button>
+
+                </div>
+            </div>
+        </el-card>
+        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+            <div style="display:flex;flex-direction: row;justify-content: space-between">
+                <el-button
+                        text
+                        type=''
+                >子系统列表</el-button
+                >
+            </div>
+            <el-table
+                    ref="multipleTableRef"
+                    :data="tableData"
+                    style="max-width: 100vw;"
+                    @selection-change="handleSelectionChange"
+            >
+<!--                <el-table-column type="selection" width="55" />-->
+                <el-table-column label="序号" width="120">
+                    <template #default="scope">{{ scope.row.date }}</template>
+                </el-table-column>
+                <el-table-column property="name" label="子系统名称" width="120" />
+                <el-table-column property="address" label="工作量" show-overflow-tooltip />
+                <el-table-column property="address" label="周期"  />
+                <el-table-column property="address" label="负责人"  />
+                <el-table-column property="address" label="状态"  />
+                <el-table-column property="address" label="子系统简介"  />
+                <el-table-column property="address" label="截止时间"  />
+                <el-table-column property="address" label="操作"  >
+                    <el-button
+                            link
+                            style="color:deepskyblue"
+                    >查看详情</el-button
+                    >
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                    larger
+                    background
+                    layout="prev, pager, next"
+                    :total="50"
+                    class="mt-4"
+                    style="margin-top:2vh"
+            />
+        </el-card>
+        <!--    <div style="margin-top: 20px">-->
+        <!--        <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
+        <!--        >Toggle selection status of second and third rows</el-button-->
+        <!--        >-->
+        <!--        <el-button @click="toggleSelection()">Clear selection</el-button>-->
+        <!--    </div>-->
     </div>
-    <unfixed-thead />
-  </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { ref } from 'vue';
-import FixedThead from './components/FixedThead';
+import { ElTable } from 'element-plus';
-import UnfixedThead from './components/UnfixedThead';
 
-export default defineComponent({
+interface User {
-  name: 'DynamicTable',
+    date: string
-  components: { FixedThead, UnfixedThead }
+    name: string
+    address: string
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+  multipleSelection.value = val;
+};
+
+const tableData: User[] = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+
+];
+
+// 输入框1
+import { onMounted } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+  const results = queryString
+    ? links.value.filter(createFilter(queryString))
+    : links.value;
+    // call callback function to return suggestion objects
+  cb(results);
+};
+const createFilter = (queryString) => {
+  return (restaurant) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    );
+  };
+};
+const loadAll = () => {
+  return [
+    { value: '1' },
+    { value: '2' },
+    { value: '3' },
+    { value: '4' },
+    { value: '5' }
+
+  ];
+};
+const handleSelect = (item: LinkItem) => {
+  console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+  console.log(ev);
+};
+
+onMounted(() => {
+  links.value = loadAll();
 });
-</script>
 
+// 时间选择器
+const value1 = ref('');
+const value2 = ref('');
+
+const shortcuts = [
+  {
+    text: 'Last week',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+</script>
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>

src/views/theme/index.vue

@@ -1,137 +1,227 @@
+<!--<template>-->
+<!--  <div class="app-container">-->
+<!--    <el-card class="box-card">-->
+<!--      <template #header>-->
+<!--        <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">-->
+<!--          Theme documentation-->
+<!--        </a>-->
+<!--      </template>-->
+<!--      <div class="box-item">-->
+<!--        <span class="field-label">Change Theme : </span>-->
+<!--        <el-switch v-model="theme" />-->
+<!--        <aside style="margin-top:15px;">-->
+<!--          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.-->
+<!--        </aside>-->
+<!--      </div>-->
+<!--    </el-card>-->
+
+<!--    <div class="block">-->
+<!--      <el-button type="primary">-->
+<!--        Primary-->
+<!--      </el-button>-->
+<!--      <el-button type="success">-->
+<!--        Success-->
+<!--      </el-button>-->
+<!--      <el-button type="info">-->
+<!--        Info-->
+<!--      </el-button>-->
+<!--      <el-button type="warning">-->
+<!--        Warning-->
+<!--      </el-button>-->
+<!--      <el-button type="danger">-->
+<!--        Danger-->
+<!--      </el-button>-->
+<!--    </div>-->
+
+<!--    <div class="block">-->
+<!--      <el-button type="primary" :icon="IconEdit" />-->
+<!--      <el-button type="primary" :icon="IconShare" />-->
+<!--      <el-button type="primary" :icon="IconDelete" />-->
+<!--      <el-button type="primary" :icon="IconSearch">-->
+<!--        Search-->
+<!--      </el-button>-->
+<!--      <el-button type="primary">-->
+<!--        Upload <el-icon><icon-upload /></el-icon>-->
+<!--      </el-button>-->
+<!--    </div>-->
+
+<!--    <div class="block">-->
+<!--      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">-->
+<!--        {{ tag.name }}-->
+<!--      </el-tag>-->
+<!--    </div>-->
+
+<!--    <div class="block">-->
+<!--      <el-radio-group v-model="radio">-->
+<!--        <el-radio :label="3">-->
+<!--          Option A-->
+<!--        </el-radio>-->
+<!--        <el-radio :label="6">-->
+<!--          Option B-->
+<!--        </el-radio>-->
+<!--        <el-radio :label="9">-->
+<!--          Option C-->
+<!--        </el-radio>-->
+<!--      </el-radio-group>-->
+<!--    </div>-->
+
+<!--    <div class="block">-->
+<!--      <el-slider v-model="slideValue" />-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import { defineComponent, markRaw } from 'vue';-->
+<!--import {-->
+<!--  Edit as IconEdit,-->
+<!--  Share as IconShare,-->
+<!--  Delete as IconDelete,-->
+<!--  Search as IconSearch,-->
+<!--  Upload as IconUpload-->
+<!--} from '@element-plus/icons-vue';-->
+
+<!--export default defineComponent({-->
+<!--  name: 'Theme',-->
+<!--  components: { IconUpload },-->
+<!--  data() {-->
+<!--    return {-->
+<!--      IconEdit: markRaw(IconEdit),-->
+<!--      IconShare: markRaw(IconShare),-->
+<!--      IconDelete: markRaw(IconDelete),-->
+<!--      IconSearch: markRaw(IconSearch),-->
+<!--      theme: false,-->
+<!--      tags: [-->
+<!--        { name: 'Tag One', type: '' },-->
+<!--        { name: 'Tag Two', type: 'info' },-->
+<!--        { name: 'Tag Three', type: 'success' },-->
+<!--        { name: 'Tag Four', type: 'warning' },-->
+<!--        { name: 'Tag Five', type: 'danger' }-->
+<!--      ],-->
+<!--      slideValue: 50,-->
+<!--      radio: 3-->
+<!--    };-->
+<!--  },-->
+<!--  watch: {-->
+<!--    theme() {-->
+<!--      console.log('watch theme', this.theme);-->
+<!--      // toggleClass(document.body, 'custom-theme');-->
+<!--      const htmlTag = document.querySelector('html');-->
+<!--      if (this.theme) {-->
+<!--        htmlTag.classList.add('dark');-->
+<!--      } else {-->
+<!--        htmlTag.classList.remove('dark');-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+<!--});-->
+<!--</script>-->
+
+<!--<style scoped>-->
+<!--.field-label{-->
+<!--  vertical-align: middle;-->
+<!--}-->
+<!--.box-card {-->
+<!--  width: 400px;-->
+<!--  max-width: 100%;-->
+<!--  margin: 20px auto;-->
+<!--}-->
+
+<!--.block {-->
+<!--  padding: 30px 24px;-->
+<!--}-->
+
+<!--.tag-item {-->
+<!--  margin-right: 15px;-->
+<!--}-->
+<!--</style>-->
+
 <template>
-  <div class="app-container">
+    <div>
-    <el-card class="box-card">
+        <div v-for="(row, index) in tableData" :key="index" class="table-row">
-      <template #header>
+            <div class="table-cell">
-        <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">
+                <div class="date">
-          Theme documentation
+                    <el-icon><timer /></el-icon>
-        </a>
+                    <span>{{ row.date }}</span>
-      </template>
+                </div>
-      <div class="box-item">
+            </div>
-        <span class="field-label">Change Theme : </span>
+            <div class="table-cell">
-        <el-switch v-model="theme" />
+                <el-popover effect="light" trigger="hover" placement="top" width="auto">
-        <aside style="margin-top:15px;">
+                    <template #default>
-          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
+                        <div>name: {{ row.name }}</div>
-        </aside>
+                        <div>address: {{ row.address }}</div>
-      </div>
+                    </template>
-    </el-card>
+                    <template #reference>
-
+                        <el-tag>{{ row.name }}</el-tag>
-    <div class="block">
+                    </template>
-      <el-button type="primary">
+                </el-popover>
-        Primary
+            </div>
-      </el-button>
+            <div class="table-cell">
-      <el-button type="success">
+                <el-button size="small" @click="handleEdit(index, row)">Edit</el-button>
-        Success
+                <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
-      </el-button>
+            </div>
-      <el-button type="info">
+        </div>
-        Info
-      </el-button>
-      <el-button type="warning">
-        Warning
-      </el-button>
-      <el-button type="danger">
-        Danger
-      </el-button>
     </div>
-
-    <div class="block">
-      <el-button type="primary" :icon="IconEdit" />
-      <el-button type="primary" :icon="IconShare" />
-      <el-button type="primary" :icon="IconDelete" />
-      <el-button type="primary" :icon="IconSearch">
-        Search
-      </el-button>
-      <el-button type="primary">
-        Upload <el-icon><icon-upload /></el-icon>
-      </el-button>
-    </div>
-
-    <div class="block">
-      <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
-        {{ tag.name }}
-      </el-tag>
-    </div>
-
-    <div class="block">
-      <el-radio-group v-model="radio">
-        <el-radio :label="3">
-          Option A
-        </el-radio>
-        <el-radio :label="6">
-          Option B
-        </el-radio>
-        <el-radio :label="9">
-          Option C
-        </el-radio>
-      </el-radio-group>
-    </div>
-
-    <div class="block">
-      <el-slider v-model="slideValue" />
-    </div>
-  </div>
 </template>
 
-<script>
-import { defineComponent, markRaw } from 'vue';
-import {
-  Edit as IconEdit,
-  Share as IconShare,
-  Delete as IconDelete,
-  Search as IconSearch,
-  Upload as IconUpload
-} from '@element-plus/icons-vue';
-
-export default defineComponent({
-  name: 'Theme',
-  components: { IconUpload },
-  data() {
-    return {
-      IconEdit: markRaw(IconEdit),
-      IconShare: markRaw(IconShare),
-      IconDelete: markRaw(IconDelete),
-      IconSearch: markRaw(IconSearch),
-      theme: false,
-      tags: [
-        { name: 'Tag One', type: '' },
-        { name: 'Tag Two', type: 'info' },
-        { name: 'Tag Three', type: 'success' },
-        { name: 'Tag Four', type: 'warning' },
-        { name: 'Tag Five', type: 'danger' }
-      ],
-      slideValue: 50,
-      radio: 3
-    };
-  },
-  watch: {
-    theme() {
-      console.log('watch theme', this.theme);
-      // toggleClass(document.body, 'custom-theme');
-      const htmlTag = document.querySelector('html');
-      if (this.theme) {
-        htmlTag.classList.add('dark');
-      } else {
-        htmlTag.classList.remove('dark');
-      }
-    }
-  }
-});
-</script>
-
 <style scoped>
-.field-label{
+.table-row {
-  vertical-align: middle;
+    display: flex;
-}
+    align-items: center;
-.box-card {
+    margin-bottom: 10px;
-  width: 400px;
-  max-width: 100%;
-  margin: 20px auto;
 }
 
-.block {
+.table-cell {
-  padding: 30px 24px;
+    flex: 1;
+    padding: 5px;
 }
 
-.tag-item {
+.date {
-  margin-right: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.date el-icon {
+    margin-right: 10px;
 }
 </style>
+
+<script lang="ts" setup>
+import { Timer } from '@element-plus/icons-vue'
+
+interface User {
+    date: string
+    name: string
+    address: string
+}
+
+const handleEdit = (index: number, row: User) => {
+    console.log(index, row)
+}
+const handleDelete = (index: number, row: User) => {
+    console.log(index, row)
+}
+
+const tableData: User[] = [
+    {
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+        date: '2016-05-04',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },
+]
+</script>