refactor: 虚拟表格优化

mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue

@@ -88,13 +88,13 @@
 
                     <template v-if="loading" #overlay>
                         <div class="el-loading-mask" style="display: flex; align-items: center; justify-content: center">
-                            <SvgIcon name="loading" color="var(--el-color-primary)" :size="26" />
+                            <SvgIcon class="is-loading" name="loading" color="var(--el-color-primary)" :size="42" />
                         </div>
                     </template>
 
                     <template #empty>
                         <div style="text-align: center">
-                            <el-empty :description="state.emptyText" :image-size="100" />
+                            <el-empty :style="{ height: `${tableHeight}px` }" :description="state.emptyText" :image-size="100" />
                         </div>
                     </template>
                 </el-table-v2>
@@ -312,7 +312,12 @@ watch(
 watch(
     () => props.columns,
     (newValue: any) => {
-        setTableColumns(newValue);
+        // 赋值列字段值是否隐藏，state.columns多了一列索引列
+        if (newValue.length + 1 == state.columns.length) {
+            for (let i = 0; i < newValue.length; i++) {
+                state.columns[i + 1].hidden = !newValue[i].show;
+            }
+        }
     },
     {
         deep: true,
@@ -507,7 +512,9 @@ const onGenerateJson = async () => {
     for (let selectionData of selectionDatas) {
         let obj = {};
         for (let column of state.columns) {
-            obj[column.title] = selectionData[column.dataKey];
+            if (column.show) {
+                obj[column.title] = selectionData[column.dataKey];
+            }
         }
         jsonObj.push(obj);
     }

mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue

@@ -35,6 +35,16 @@
                 </el-tooltip>
                 <el-divider direction="vertical" border-style="dashed" />
 
+                <el-tooltip :show-after="500" class="box-item" effect="dark" content="commit" placement="top">
+                    <template #content>
+                        1. 右击数据/表头可显示操作菜单 <br />
+                        2. 按住Ctrl点击数据则为多选 <br />
+                        3. 双击单元格可编辑数据
+                    </template>
+                    <el-link icon="QuestionFilled" :underline="false"> </el-link>
+                </el-tooltip>
+                <el-divider direction="vertical" border-style="dashed" />
+
                 <el-tooltip :show-after="500" v-if="hasUpdatedFileds" class="box-item" effect="dark" content="提交修改" placement="top">
                     <el-link @click="submitUpdateFields()" type="success" :underline="false" class="f12">提交</el-link>
                 </el-tooltip>

mayfly_go_web/src/views/ops/tag/TagTreeList.vue

@@ -4,7 +4,7 @@
             <el-input v-model="filterTag" placeholder="输入关键字过滤(右击进行操作)" style="width: 220px; margin-right: 10px" />
             <el-button v-auth="'tag:save'" type="primary" icon="plus" @click="showSaveTagDialog(null)">添加</el-button>
             <div style="float: right">
-                <el-tooltip effect="dark" placement="top">
+                <el-tooltip placement="top">
                     <template #content>
                         1. 用于将资产进行归类
                         <br />2. 可在团队管理中进行分配，用于资源隔离 <br />3. 拥有父标签的团队成员可访问操作其自身或子标签关联的资源