Vue3 重构：地区接入 TableV2 高性能表格

Author: YunaiV

src/api/system/area/index.ts

@@ -6,6 +6,6 @@ export const getAreaTree = async () => {
 }
 
 // 获得 IP 对应的地区名
-export const getDeptApi = async (ip: string) => {
+export const getAreaByIp = async (ip: string) => {
   return await request.get({ url: '/system/area/get-by-ip?ip=' + ip })
 }

src/types/auto-components.d.ts

@@ -73,6 +73,7 @@ declare module '@vue/runtime-core' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']

src/views/system/area/form.vue

@@ -0,0 +1,71 @@
+<template>
+  <Dialog title="IP 查询" v-model="modelVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="IP" prop="ip">
+        <el-input v-model="formData.ip" placeholder="请输入 IP 地址" />
+      </el-form-item>
+      <el-form-item label="地址" prop="result">
+        <el-input v-model="formData.result" readonly placeholder="展示查询 IP 结果" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as AreaApi from '@/api/system/area'
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
+const formData = ref({
+  ip: '',
+  result: undefined
+})
+const formRules = reactive({
+  ip: [{ required: true, message: 'IP 地址不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async () => {
+  modelVisible.value = true
+  resetForm()
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    formData.value.result = await AreaApi.getAreaByIp(formData.value.ip!.trim())
+    message.success('查询成功')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    ip: '',
+    result: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/system/area/index.vue

@@ -1,46 +1,71 @@
 <template>
-  <ContentWrap>
-    <div style="width: 100%; height: 500px">
+  <!-- 操作栏 -->
+  <content-wrap>
+    <el-button type="primary" @click="openModal()">
+      <Icon icon="ep:plus" class="mr-5px" /> IP 查询
+    </el-button>
+  </content-wrap>
+
+  <!-- 列表 -->
+  <content-wrap>
+    <div style="width: 100%; height: 700px">
+      <!-- AutoResizer 自动调节大小 -->
       <el-auto-resizer>
         <template #default="{ height, width }">
+          <!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
           <el-table-v2
             :columns="columns"
-            :data="tableData"
+            :data="list"
             :width="width"
             :height="height"
-            fixed
             expand-column-key="id"
           />
         </template>
       </el-auto-resizer>
     </div>
-  </ContentWrap>
+  </content-wrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <area-form ref="modalRef" />
 </template>
-<script setup lang="tsx">
-import { Column, ElTableV2 } from 'element-plus'
+<script setup lang="tsx" name="Area">
+import type { Column } from 'element-plus'
+import AreaForm from './form.vue'
 import * as AreaApi from '@/api/system/area'
 
+// 表格的 column 字段
 const columns: Column[] = [
   {
-    key: 'id',
-    dataKey: 'id', // 需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
+    dataKey: 'id', // 需要渲染当前列的数据字段。例如说：{id:9527, name:'Mike'}，则填 id
     title: '编号', // 显示在单元格表头的文本
-    width: 200, // 当前列的宽度，必须设置
-    fixed: true // 是否固定列
+    width: 400, // 当前列的宽度，必须设置
+    fixed: true, // 是否固定列
+    key: 'id' // 树形展开对应的 key
   },
   {
-    key: 'name',
     dataKey: 'name',
     title: '地名',
     width: 200
   }
 ]
+// 表格的数据
+const list = ref([])
 
-const tableData = ref([])
-
+/**
+ * 获得数据列表
+ */
 const getList = async () => {
-  tableData.value = await AreaApi.getAreaTree()
+  list.value = await AreaApi.getAreaTree()
+}
+
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = () => {
+  modalRef.value.openModal()
 }
 
-getList()
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>