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