完善功能

hookehuyr
Commit a506c1f27f57ec0179c4f35b3c095d65d580b584 a506c1f2 1 parent 1da6df15
Showing 1 changed file with 109 additions and 24 deletions
src/views/index.vue
--- a/src/views/index.vue
View file @a506c1f
+++ b/src/views/index.vue
View file @a506c1f
 <!--
  * @Date: 2024-07-23 10:34:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-10 15:21:17
+ * @LastEditTime: 2024-09-11 17:00:25
  * @FilePath: /custom_table/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="table-container">
-    <el-row justify="space-between">
+    <el-row class="table-header" justify="space-between">
       <el-col :span="12">
         <div class="table-tools">
-          <el-button type="primary" :icon="Plus">添加</el-button>&nbsp;
+          <el-button type="primary" :icon="Plus" @click="addItem">添加</el-button>&nbsp;
           <div class="table-tools-item">
             <el-icon style="vertical-align: middle"><Download /></el-icon>
             <span class="table-tools-item-text">导入</span>
@@ -28,10 +28,18 @@
       <el-col :span="12" style="text-align: right;">
           <el-input
             v-model="input3"
-            style="width: 200px; margin-right: 1rem;"
+            style="width: 300px; margin-right: 1rem;"
             placeholder="搜索数据"
             :prefix-icon="Search"
-          />
+          >
+            <!-- <template #append>
+              <el-select v-model="select" placeholder="Select" style="width: 115px">
+                <el-option label="Restaurant" value="1" />
+                <el-option label="Order No." value="2" />
+                <el-option label="Tel" value="3" />
+              </el-select>
+            </template> -->
+          </el-input>
           <el-popover :visible="filter_visible" :width="400" placement="bottom-end">
             <template #reference>
               <div class="tooltip-container">
@@ -40,12 +48,19 @@
               </div>
             </template>
             <el-form ref="filter_target" :model="form" label-width="auto" style="max-width: 600px">
+              <div style="padding: 0.5rem 0; display: flex; align-items: center; color: #C2915F; margin-bottom: 0.5rem;">
+                <el-icon size="1.5rem" style="vertical-align: middle;"><Plus />&nbsp;</el-icon><span style="font-size: 0.85rem;">添加筛选条件</span>
+              </div>
               <el-form-item label="字段状态">
                 <el-select v-model="form.status" @visible-change="handleVisibleChange" placeholder="请选择">
                   <el-option label="状态1" value="type1" />
                   <el-option label="状态2" value="type2" />
                 </el-select>
               </el-form-item>
+              <el-form-item style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee;">
+                <el-button type="primary">筛选</el-button>
+                <el-button type="link">清空</el-button>
+              </el-form-item>
             </el-form>
           </el-popover>
           &nbsp;
@@ -59,9 +74,9 @@
             <div>
               <el-checkbox-group v-model="checkList">
                 <el-checkbox label="全选" value="全选" />
-                <el-checkbox label="Option A" value="Value A" />
+                <el-checkbox label="字段 A" value="Value A" />
-                <el-checkbox label="Option B" value="Value B" />
+                <el-checkbox label="字段 B" value="Value B" />
-                <el-checkbox label="Option C" value="Value C" />
+                <el-checkbox label="字段 C" value="Value C" />
               </el-checkbox-group>
             </div>
           </el-popover>
@@ -73,11 +88,27 @@
                 <span class="tooltip-text">排序</span>
               </div>
             </template>
+            <div style="padding: 0.5rem 0; display: flex; align-items: center; color: #C2915F; margin-bottom: 0.5rem;">
+              <el-icon size="1.5rem" style="vertical-align: middle;"><Plus />&nbsp;</el-icon><span style="font-size: 0.85rem;">添加排序规则</span>
+            </div>
             <div>
-              <div>
+              <el-row align="middle">
-                日期
+                <el-col :span="12">
-                <el-button type="primary" plain size="small" @click="sortBy('asc')">升序</el-button>
+                  <div style="font-size: 1rem;">日期</div>
-                <el-button type="primary" plain size="small" @click="sortBy('desc')">降序</el-button>
+                </el-col>
+                <el-col :span="10">
+                  <el-radio-group v-model="sortRadio" size="large">
+                    <el-radio-button label="升序" value="asc" />
+                    <el-radio-button label="降序" value="desc" />
+                  </el-radio-group>
+                </el-col>
+                <el-col :span="2">
+                  <el-icon size="1.25rem" style="vertical-align: middle;"><Delete /></el-icon>
+                </el-col>
+              </el-row>
+              <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee;">
+                <el-button type="primary">排序</el-button>
+                <el-button type="link">清空</el-button>
               </div>
             </div>
           </el-popover>
@@ -90,23 +121,47 @@
       </el-col>
     </el-row>
     <el-table
-      :data="tableData" stripe border height="780"
+      :data="tableData" stripe border :height="table_height"
       style="width: 100%; margin: 1rem 0;"
       @selection-change="handleSelectionChange"
       @row-click="handleRowClick"
       @cell-click="handleCellClick"
+      header-row-class-name="table-header-row"
     >
       <el-table-column type="selection" fixed width="55" />
-      <el-table-column prop="date" label="Date" width="180" />
+      <el-table-column prop="date" label="Date" width="180">
-      <el-table-column prop="name" label="Name" width="180" />
+        <template v-if="false" #default="scope">
-      <el-table-column prop="address" label="Address" width="380" />
+          123
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="Name" width="180">
+        <template v-if="true" #default="scope">
+          <div style="display: flex; align-items: center">
+            <el-icon><Bell /></el-icon>
+            <el-popover
+              placement="bottom"
+              title="姓名"
+              :width="200"
+              trigger="click"
+            >
+              <template #reference>
+                <span class="target-name" style="margin-left: 10px; color: blueviolet;">{{ scope.row.name }}</span>
+              </template>
+              <template #default>
+                <div>其他内容的介绍</div>
+              </template>
+            </el-popover>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" label="Address" width="180" show-overflow-tooltip />
       <el-table-column prop="text1" label="text1" width="380" />
       <el-table-column prop="text2" label="text2" width="380" />
       <el-table-column prop="text3" label="text3" width="380" />
       <el-table-column prop="text4" label="text4" width="380" />
       <el-table-column prop="text5" label="text5" width="380" />
     </el-table>
-    <el-row justify="space-between">
+    <el-row class="table-footer" justify="space-between">
       <el-col :span="8">
         <el-pagination
           v-model:current-page="currentPage4"
@@ -178,7 +233,7 @@
 <script setup>
 import { ref, unref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Plus, Download, Upload, Search } from '@element-plus/icons-vue'
+import { Plus, Download, Upload, Search, ArrowDown } from '@element-plus/icons-vue'
 // import { ClickOutside as vClickOutside } from 'element-plus'
 import { onClickOutside } from '@vueuse/core'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
@@ -197,6 +252,8 @@ const handleSelectionChange = (val) => {
   console.log("🚀 ~ file: index.vue:136 ~ handleSelectionChange ~ multipleSelection.value:", multipleSelection.value);
 }
+const table_height = ref('780')
+
 onMounted(() => {
   for (let index = 0; index < 50; index++) {
     tableData.value.push({
@@ -211,7 +268,14 @@ onMounted(() => {
       text5: 'No. 189, Grove St, Los Angeles',
     })
   }
-
+  // 表格高度
+  nextTick(() => {
+    let height = $(window).height();
+    let header_height = $('.table-header').height();
+    let footer_height = $('.table-footer').height();
+    // 动态计算高度
+    table_height.value = height - header_height - footer_height - 70;
+  });
 });
 const currentPage4 = ref(4)
@@ -225,11 +289,16 @@ const handleCurrentChange = (val) => {
 }
 const handleCellClick = (row, column, cell, event) => { // 点击单元格
-  // console.warn(row, column, cell, event);
+  console.warn(row, column, cell, event);
+  // TEST: 测试点击到姓名时不弹出抽屉
+  let flag = $(event.target).hasClass('target-name'); // 点击到了名字
+  if (!flag) {
+    drawer.value = true;
+  }
 }
-const handleRowClick = (row, event, column) => {
+const handleRowClick = (row, column, event) => {
-  console.warn(row, event, column);
+  // console.warn(row, event, column);
-  drawer.value = true;
+  // drawer.value = true;
 }
 const form = ref({
@@ -259,6 +328,9 @@ const refresh = () => {
 const drawer = ref(false);
 const iframe_src = ref('https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=16178737121463290737&channelId=1119&toc_style_id=feeds_default&share_to=wechat&track_id=cbcca7b0-6de2-4474-9a9f-96902fbaea50');
+const addItem = () => {
+  drawer.value = true;
+}
 watchEffect(() => {
   if (drawer.value) {
@@ -273,7 +345,9 @@ watchEffect(() => {
       $('#_iframe').height(height - header_height - tools_height);
     });
   }
-})
+});
+
+const sortRadio = ref('asc');
 </script>
 <style lang="less">
@@ -337,6 +411,17 @@ watchEffect(() => {
     opacity: 1;
   }
+  .target-name {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .table-header-row {
+  }
+  .el-table th.el-table__cell {
+    background-color: #f6f7fa !important;
+  }
 }
 .my_iframe {