style(tables): unify components of some tables

emqx · Dec 27, 2024 · b65956e · b65956e
1 parent a16509b
commit b65956e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 42 deletions.
diff --git a/src/components/ArrayEditorTable.vue b/src/components/ArrayEditorTable.vue
@@ -7,14 +7,14 @@
     </el-table-column>
     <el-table-column v-if="!disabled" width="100">
       <template #header>
-        <a href="javascript:;" class="btn" @click="addColumn">
+        <el-button link type="primary" @click="addColumn">
           {{ $t('Base.add') }}
-        </a>
+        </el-button>
       </template>
       <template #default="{ $index }">
-        <a href="javascript:;" class="btn" @click="deleteItem($index)">
+        <el-button link type="primary" @click="deleteItem($index)">
           {{ $t('Base.delete') }}
-        </a>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>

diff --git a/src/components/ObjectArrayEditor.vue b/src/components/ObjectArrayEditor.vue
@@ -34,14 +34,14 @@
     </el-table-column>
     <el-table-column width="80px" v-if="!disabled">
       <template #header>
-        <a href="javascript:;" @click="addItem">
+        <el-button link type="primary" @click="addItem">
           {{ $t('Base.add') }}
-        </a>
+        </el-button>
       </template>
       <template #default="{ $index }">
-        <a href="javascript:;" @click="deleteItem($index)">
+        <el-button link type="primary" @click="deleteItem($index)">
           {{ $t('Base.delete') }}
-        </a>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>

diff --git a/src/views/Auth/components/AuthzManager.vue b/src/views/Auth/components/AuthzManager.vue
@@ -211,28 +211,30 @@
               </el-table-column>
               <el-table-column align="right" max-width="160px">
                 <template #header>
-                  <a href="javascript:;" class="btn" @click="addColumn">
+                  <el-button link type="primary" class="btn" @click="addColumn">
                     {{ $t('Base.add') }}
-                  </a>
+                  </el-button>
                 </template>
                 <template #default="{ row, $index }">
-                  <a
-                    href="javascript:;"
-                    :class="['btn', { disabled: $index === 0 }]"
+                  <el-button
+                    link
+                    type="primary"
+                    :disabled="$index === 0"
                     @click="handleUp(row, $index)"
                   >
                     {{ $t('Base.up') }}
-                  </a>
-                  <a
-                    href="javascript:;"
-                    :class="['btn', { disabled: $index === rulesData.length - 1 }]"
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    :disabled="$index === rulesData.length - 1"
                     @click="handleDown(row, $index)"
                   >
                     {{ $t('Base.down') }}
-                  </a>
-                  <a href="javascript:;" class="btn" @click="deleteItem(row, $index)">
+                  </el-button>
+                  <el-button link type="primary" class="btn" @click="deleteItem(row, $index)">
                     {{ $t('Base.delete') }}
-                  </a>
+                  </el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -661,12 +663,13 @@ export default defineComponent({
   }
   .form-table {
     .cell {
-      .btn.disabled {
-        cursor: not-allowed;
-        color: var(--color-text-placeholder);
-      }
-      .btn + .btn {
-        margin-left: 8px;
+      .el-button {
+        padding: 0;
+        margin-right: 0;
+        border: none;
+        & + .el-button {
+          margin-left: 8px;
+        }
       }
     }
   }

diff --git a/src/views/Dashboard/components/NodesGraphCard.vue b/src/views/Dashboard/components/NodesGraphCard.vue
@@ -12,9 +12,9 @@
         <div class="node-info" v-if="currentInfo">
           <div class="node-card-header">
             <div class="node-title">{{ tl('nodeData') }}</div>
-            <a class="nodes-link" href="javascript:;" @click="$router.push('nodes')">
+            <router-link class="nodes-link" :to="{ name: 'nodes' }">
               {{ tl('viewNodes') }}<el-icon><Right /></el-icon>
-            </a>
+            </router-link>
           </div>
           <div class="node-card-body">
             <el-row :gutter="26">

diff --git a/src/views/Diagnose/LogTrace/LogTrace.vue b/src/views/Diagnose/LogTrace/LogTrace.vue
@@ -10,17 +10,9 @@
     <el-table :data="traceTable" v-loading="traceTbLoading" class="data-table">
       <el-table-column :label="$t('LogTrace.name')" prop="name" :min-width="100">
         <template #default="{ row }">
-          <a
-            href="javascript:;"
-            @click="
-              $router.push({
-                name: 'log-trace-detail',
-                params: { id: row.name },
-              })
-            "
-          >
+          <router-link :to="{ name: 'log-trace-detail', params: { id: row.name } }">
             {{ row.name }}
-          </a>
+          </router-link>
         </template>
       </el-table-column>
       <el-table-column :label="$t('LogTrace.type')" prop="type" :min-width="100">

diff --git a/src/views/Gateway/components/topicEditList.vue b/src/views/Gateway/components/topicEditList.vue
@@ -23,14 +23,14 @@
         </el-table-column>
         <el-table-column width="80">
           <template #header="scope">
-            <TableButton @click="addTopic()" :disabled="disableAdd(scope)">
+            <el-button link type="primary" @click="addTopic()" :disabled="disableAdd(scope)">
               {{ $t('Base.add') }}
-            </TableButton>
+            </el-button>
           </template>
           <template #default="{ row }">
-            <TableButton @click="delTopic(row)">
+            <el-button link type="primary" @click="delTopic(row)">
               {{ $t('Base.delete') }}
-            </TableButton>
+            </el-button>
           </template>
         </el-table-column>
       </el-table>