From c56a887767fd1a132b01d6ca15d5a00dbd6f0777 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 18 Mar 2023 21:45:58 +0800
Subject: [PATCH] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A=E5=9C=B0?=
=?UTF-8?q?=E5=8C=BA=E6=8E=A5=E5=85=A5=20TableV2=20=E9=AB=98=E6=80=A7?=
=?UTF-8?q?=E8=83=BD=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/system/area/index.ts | 11 ++++++++
src/views/system/area/index.vue | 46 +++++++++++++++++++++++++++++++++
2 files changed, 57 insertions(+)
create mode 100644 src/api/system/area/index.ts
create mode 100644 src/views/system/area/index.vue
diff --git a/src/api/system/area/index.ts b/src/api/system/area/index.ts
new file mode 100644
index 00000000..f77ce0d1
--- /dev/null
+++ b/src/api/system/area/index.ts
@@ -0,0 +1,11 @@
+import request from '@/config/axios'
+
+// 获得地区树
+export const getAreaTree = async () => {
+ return await request.get({ url: '/system/area/tree' })
+}
+
+// 获得 IP 对应的地区名
+export const getDeptApi = async (ip: string) => {
+ return await request.get({ url: '/system/area/get-by-ip?ip=' + ip })
+}
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
new file mode 100644
index 00000000..dcb659c3
--- /dev/null
+++ b/src/views/system/area/index.vue
@@ -0,0 +1,46 @@
+<template>
+ <ContentWrap>
+ <div style="width: 100%; height: 500px">
+ <el-auto-resizer>
+ <template #default="{ height, width }">
+ <el-table-v2
+ :columns="columns"
+ :data="tableData"
+ :width="width"
+ :height="height"
+ fixed
+ expand-column-key="id"
+ />
+ </template>
+ </el-auto-resizer>
+ </div>
+ </ContentWrap>
+</template>
+<script setup lang="tsx">
+import { Column, ElTableV2 } from 'element-plus'
+import * as AreaApi from '@/api/system/area'
+
+const columns: Column[] = [
+ {
+ key: 'id',
+ dataKey: 'id', // 需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
+ title: '编号', // 显示在单元格表头的文本
+ width: 200, // 当前列的宽度，必须设置
+ fixed: true // 是否固定列
+ },
+ {
+ key: 'name',
+ dataKey: 'name',
+ title: '地名',
+ width: 200
+ }
+]
+
+const tableData = ref([])
+
+const getList = async () => {
+ tableData.value = await AreaApi.getAreaTree()
+}
+
+getList()
+</script>