⚡️精简表格代码，优化表格组件手机端显示，开源版彻底完成手机、平板、电脑三端适配

src/views/personnelManagement/menuManagement/index.vue

@@ -41,16 +41,16 @@
             label="路径"
           ></el-table-column>
           <el-table-column show-overflow-tooltip label="是否隐藏">
-            <template slot-scope="scope">
+            <template #default="{ row }">
               <span>
-                {{ scope.row.hidden ? "是" : "否" }}
+                {{ row.hidden ? "是" : "否" }}
               </span>
             </template>
           </el-table-column>
           <el-table-column show-overflow-tooltip label="是否一直显示当前节点">
-            <template slot-scope="scope">
+            <template #default="{ row }">
               <span>
-                {{ scope.row.alwaysShow ? "是" : "否" }}
+                {{ row.alwaysShow ? "是" : "否" }}
               </span>
             </template>
           </el-table-column>
@@ -70,49 +70,40 @@
             label="标题"
           ></el-table-column>
           <el-table-column show-overflow-tooltip label="图标">
-            <template slot-scope="scope">
-              <span v-if="scope.row.meta">
+            <template #default="{ row }">
+              <span v-if="row.meta">
                 <vab-icon
-                  v-if="scope.row.meta.icon"
-                  :icon="['fas', scope.row.meta.icon]"
+                  v-if="row.meta.icon"
+                  :icon="['fas', row.meta.icon]"
                 ></vab-icon>
               </span>
             </template>
           </el-table-column>
           <el-table-column show-overflow-tooltip label="是否固定">
-            <template slot-scope="scope">
-              <span v-if="scope.row.meta">
-                {{ scope.row.meta.affix ? "是" : "否" }}
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.affix ? "是" : "否" }}
               </span>
             </template>
           </el-table-column>
           <el-table-column show-overflow-tooltip label="是否无缓存">
-            <template slot-scope="scope">
-              <span v-if="scope.row.meta">
-                {{ scope.row.meta.noKeepAlive ? "是" : "否" }}
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.noKeepAlive ? "是" : "否" }}
               </span>
             </template>
           </el-table-column>
           <el-table-column show-overflow-tooltip label="badge">
-            <template slot-scope="scope">
-              <span v-if="scope.row.meta">
-                {{ scope.row.meta.badge }}
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.badge }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column
-            show-overflow-tooltip
-            fixed="right"
-            label="操作"
-            width="200"
-          >
-            <template #default="scope">
-              <el-button type="text" @click="handleEdit(scope.row)">
-                编辑
-              </el-button>
-              <el-button type="text" @click="handleDelete(scope.row)">
-                删除
-              </el-button>
+          <el-table-column show-overflow-tooltip label="操作" width="200">
+            <template #default="{ row }">
+              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+              <el-button type="text" @click="handleDelete(row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>

src/views/personnelManagement/roleManagement/index.vue

@@ -47,17 +47,10 @@
         prop="permission"
         label="权限码"
       ></el-table-column>
-      <el-table-column
-        show-overflow-tooltip
-        fixed="right"
-        label="操作"
-        width="200"
-      >
-        <template #default="scope">
-          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-          <el-button type="text" @click="handleDelete(scope.row)">
-            删除
-          </el-button>
+      <el-table-column show-overflow-tooltip label="操作" width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>

src/views/personnelManagement/userManagement/index.vue

@@ -63,17 +63,10 @@
         prop="datatime"
         label="修改时间"
       ></el-table-column>
-      <el-table-column
-        show-overflow-tooltip
-        fixed="right"
-        label="操作"
-        width="200"
-      >
-        <template #default="scope">
-          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-          <el-button type="text" @click="handleDelete(scope.row)">
-            删除
-          </el-button>
+      <el-table-column show-overflow-tooltip label="操作" width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>

src/views/vab/codeGenerator/components/TableExhibitionBody.vue

@@ -9,7 +9,7 @@
           :label="header.label"
           align="center"
         >
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             {{ row[header.key] }}
           </template>
         </el-table-column>

src/views/vab/codeGenerator/components/snippetTable.js

@@ -46,13 +46,13 @@ export const genTableSnippet = (headers = "getList") => {
     >
       <el-table-column show-overflow-tooltip type="selection"></el-table-column>
       ${genTableColumnSnippet(headers)}
-      <el-table-column show-overflow-tooltip fixed="right" label="操作" width="200">
-        <template v-slot="scope">
-          <el-button type="text" @click="editList(scope.row)"
+      <el-table-column show-overflow-tooltip label="操作" width="200">
+        <template #default="{row}">
+          <el-button type="text" @click="editList(row)"
           >编辑
           </el-button
           >
-          <el-button type="text" @click="tableDelete(scope.row)"
+          <el-button type="text" @click="tableDelete(row)"
           >删除
           </el-button
           >

src/views/vab/codeGenerator/components/snippetTableColumn.js

@@ -18,7 +18,7 @@ const genTabeleColumnSinppetTemplate = (key, label) => {
     val = `row.${key}`;
   }
   return `<el-table-column show-overflow-tooltip label="${label}">
-          <template v-slot={row}>
+          <template #default={row}>
             {{ ${val} }}
           </template>
         </el-table-column>`;

src/views/vab/permissions/index.vue

@@ -77,33 +77,33 @@
             label="标题"
           ></el-table-column>
           <el-table-column show-overflow-tooltip label="图标">
-            <template slot-scope="scope">
-              <span v-if="scope.row.meta">
+            <template #default="{ row }">
+              <span v-if="row.meta">
                 <vab-icon
-                  v-if="scope.row.meta.icon"
-                  :icon="['fas', scope.row.meta.icon]"
+                  v-if="row.meta.icon"
+                  :icon="['fas', row.meta.icon]"
                 ></vab-icon>
               </span>
             </template>
           </el-table-column>
           <el-table-column show-overflow-tooltip label="是否固定">
-            <template slot-scope="scope">
-              <span v-if="scope.row.meta">
-                {{ scope.row.meta.affix }}
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.affix }}
               </span>
             </template>
           </el-table-column>
           <el-table-column show-overflow-tooltip label="是否无缓存">
-            <template slot-scope="scope">
-              <span v-if="scope.row.meta">
-                {{ scope.row.meta.noKeepAlive }}
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.noKeepAlive }}
               </span>
             </template>
           </el-table-column>
           <el-table-column show-overflow-tooltip label="badge">
-            <template slot-scope="scope">
-              <span v-if="scope.row.meta">
-                {{ scope.row.meta.badge }}
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.badge }}
               </span>
             </template>
           </el-table-column>

src/views/vab/table/index.vue

@@ -51,7 +51,7 @@
         width="55"
       ></el-table-column>
       <el-table-column show-overflow-tooltip label="序号" width="95">
-        <template slot-scope="scope">
+        <template #default="scope">
           {{ scope.$index + 1 }}
         </template>
       </el-table-column>
@@ -66,11 +66,11 @@
         prop="author"
       ></el-table-column>
       <el-table-column show-overflow-tooltip label="头像">
-        <template slot-scope="scope">
+        <template #default="{ row }">
           <el-image
             v-if="imgShow"
             :preview-src-list="imageList"
-            :src="scope.row.img"
+            :src="row.img"
           ></el-image>
         </template>
       </el-table-column>
@@ -81,15 +81,15 @@
         sortable
       ></el-table-column>
       <el-table-column show-overflow-tooltip label="状态">
-        <template slot-scope="scope">
+        <template #default="{ row }">
           <el-tooltip
-            :content="scope.row.status"
+            :content="row.status"
             class="item"
             effect="dark"
             placement="top-start"
           >
-            <el-tag :type="scope.row.status | statusFilter">
-              {{ scope.row.status }}
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
             </el-tag>
           </el-tooltip>
         </template>
@@ -100,17 +100,10 @@
         prop="datetime"
         width="200"
       ></el-table-column>
-      <el-table-column
-        show-overflow-tooltip
-        label="操作"
-        width="180px"
-        fixed="right"
-      >
-        <template slot-scope="scope">
-          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-          <el-button type="text" @click="handleDelete(scope.row)">
-            删除
-          </el-button>
+      <el-table-column show-overflow-tooltip label="操作" width="180px">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>

src/views/vab/table/inlineEditTable.vue

@@ -11,12 +11,12 @@
         width="55"
       ></el-table-column>
       <el-table-column show-overflow-tooltip label="序号" width="95">
-        <template slot-scope="scope">
+        <template #default="scope">
           {{ scope.$index + 1 }}
         </template>
       </el-table-column>
       <el-table-column show-overflow-tooltip min-width="300px" label="标题">
-        <template slot-scope="{ row }">
+        <template #default="{ row }">
           <template v-if="row.edit">
             <el-input v-model="row.title" style="width: 300px" />
             <el-button
@@ -41,7 +41,7 @@
         label="操作"
         width="200"
       >
-        <template slot-scope="{ row }">
+        <template #default="{ row }">
           <el-button
             v-if="row.edit"
             type="success"

src/views/vab/tree/index.vue

@@ -21,7 +21,7 @@
           @node-collapse="nodeCollapse"
           @node-expand="nodeExpand"
         >
-          <span slot-scope="{ node, data }" class="vab-custom-tree-node">
+          <template #defalut="{ node, data }" class="vab-custom-tree-node">
             <span class="vab-tree-item">
               <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
               {{ node.label }}
@@ -51,7 +51,7 @@
                 <i class="el-icon-delete"></i>
               </a>
             </span>
-          </span>
+          </template>
         </el-tree>
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
@@ -75,7 +75,7 @@
             node-key="indexCode"
             @node-click="nodeClick"
           >
-            <span slot-scope="{ node }" class="vab-custom-tree-node">
+            <template #defalut="{ node }" class="vab-custom-tree-node">
               <span class="vab-tree-item">
                 <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
                 {{ node.label }}
@@ -99,7 +99,7 @@
                   <i class="el-icon-delete"></i>
                 </a>
               </span>
-            </span>
+            </template>
           </el-tree>
         </div>
         <div v-show="!isShow" class="el-tree-wrap">
@@ -115,7 +115,7 @@
             node-key="indexCode"
             @node-click="nodeClick"
           >
-            <span slot-scope="{ node }" class="vab-custom-tree-node">
+            <template #defalut="{ node }" class="vab-custom-tree-node">
               <span class="vab-tree-item">
                 <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
                 {{ node.label }}
@@ -133,7 +133,7 @@
                   <i class="el-icon-delete"></i>
                 </a>
               </span>
-            </span>
+            </template>
           </el-tree>
         </div>
       </el-col>
@@ -160,9 +160,9 @@
               node-key="id"
               @node-click="selectTreeNodeClick"
             >
-              <span slot-scope="{ node }" class="vab-custom-tree-node">
+              <template #defalut="{ node }" class="vab-custom-tree-node">
                 <span class="vab-tree-item">{{ node.label }}</span>
-              </span>
+              </template>
             </el-tree>
           </el-option>
         </el-select>