列表全屏

src/components/RightToolbar/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="top-right-btn" :style="style">
     <el-row>
-      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+      <!-- <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
         <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+      </el-tooltip> -->
+      <!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
         <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
-      </el-tooltip>
+      </el-tooltip> -->
       <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
         <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
         <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
@@ -20,6 +20,14 @@
           </el-dropdown-menu>
         </el-dropdown>
       </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="列表全屏" placement="top" style="margin-left: 10px">
+        <el-button
+          size="mini"
+          circle
+          icon="el-icon-full-screen"
+          @click="toggleFullscreen"
+        />
+      </el-tooltip>
     </el-row>
     <el-dialog :title="title" :visible.sync="open" append-to-body>
       <el-transfer
@@ -99,6 +107,79 @@ export default {
       this.$emit("queryTable");
     },
     // 右侧列表元素变化
+    toggleFullscreen() {
+      // 1️⃣ 找表格 DOM
+      let tableEl = document.querySelector('.el-table')
+
+      if (!tableEl) {
+        const tables = Array.from(document.querySelectorAll('.el-table'))
+        tableEl = tables.find((t) => t.offsetParent !== null)
+      }
+
+      if (!tableEl) {
+        this.$message.warning('未找到表格区域')
+        return
+      }
+
+      // 2️⃣ 找分页 DOM
+      let pagerEl = document.querySelector('.pagination-container')
+
+      if (!pagerEl) {
+        const pagers = Array.from(document.querySelectorAll('.pagination-container'))
+        pagerEl = pagers.find((p) => p.offsetParent !== null)
+      }
+
+      // 3️⃣ 找最近公共父节点
+      let fullscreenEl = tableEl.parentElement
+
+      if (pagerEl) {
+        while (fullscreenEl && (!fullscreenEl.contains(tableEl) || !fullscreenEl.contains(pagerEl))) {
+          fullscreenEl = fullscreenEl.parentElement
+        }
+      }
+
+      if (!fullscreenEl) fullscreenEl = tableEl
+
+      const doc = document
+
+      // 🔐 只保存一次原样式
+      if (!fullscreenEl.__fsBound) {
+        fullscreenEl.__oldBg = fullscreenEl.style.background
+        fullscreenEl.__oldMinHeight = fullscreenEl.style.minHeight
+        fullscreenEl.__fsBound = true
+      }
+
+      // ===== 进入全屏 =====
+      if (!doc.fullscreenElement) {
+        fullscreenEl.style.background = '#fff'
+        fullscreenEl.style.minHeight = '100vh'
+
+        const onFsChange = () => {
+          // 👉 退出全屏（ESC / API）
+          if (!document.fullscreenElement) {
+            // 1️⃣ 还原样式
+            fullscreenEl.style.background = fullscreenEl.__oldBg || ''
+            fullscreenEl.style.minHeight = fullscreenEl.__oldMinHeight || ''
+
+            // 2️⃣ 强制表格重新布局（不依赖 ref）
+            this.$nextTick(() => {
+              const tableVm = tableEl.__vue__ || document.querySelector('.el-table')?.__vue__
+
+              tableVm?.doLayout()
+            })
+
+            document.removeEventListener('fullscreenchange', onFsChange)
+          }
+        }
+
+        document.addEventListener('fullscreenchange', onFsChange)
+
+        fullscreenEl.requestFullscreen?.()
+      } else {
+        // ===== 主动退出全屏（点按钮）=====
+        doc.exitFullscreen?.()
+      }
+    },
     dataChange(data) {
       for (let item in this.columns) {
         const key = this.columns[item].key;