index.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <doc-alert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
  3. <!-- 操作栏 -->
  4. <ContentWrap>
  5. <el-button type="primary" plain @click="openForm()">
  6. <Icon icon="ep:plus" class="mr-5px" /> IP 查询
  7. </el-button>
  8. </ContentWrap>
  9. <!-- 列表 -->
  10. <ContentWrap>
  11. <div style="width: 100%; height: 700px">
  12. <!-- AutoResizer 自动调节大小 -->
  13. <el-auto-resizer>
  14. <template #default="{ height, width }">
  15. <!-- Virtualized Table 虚拟化表格:高性能,解决表格在大数据量下的卡顿问题 -->
  16. <el-table-v2
  17. :columns="columns"
  18. :data="list"
  19. :width="width"
  20. :height="height"
  21. expand-column-key="id"
  22. />
  23. </template>
  24. </el-auto-resizer>
  25. </div>
  26. </ContentWrap>
  27. <!-- 表单弹窗:添加/修改 -->
  28. <AreaForm ref="formRef" />
  29. </template>
  30. <script setup lang="tsx" name="SystemArea">
  31. import type { Column } from 'element-plus'
  32. import AreaForm from './AreaForm.vue'
  33. import * as AreaApi from '@/api/system/area'
  34. // 表格的 column 字段
  35. const columns: Column[] = [
  36. {
  37. dataKey: 'id', // 需要渲染当前列的数据字段。例如说:{id:9527, name:'Mike'},则填 id
  38. title: '编号', // 显示在单元格表头的文本
  39. width: 400, // 当前列的宽度,必须设置
  40. fixed: true, // 是否固定列
  41. key: 'id' // 树形展开对应的 key
  42. },
  43. {
  44. dataKey: 'name',
  45. title: '地名',
  46. width: 200
  47. }
  48. ]
  49. // 表格的数据
  50. const list = ref([])
  51. /**
  52. * 获得数据列表
  53. */
  54. const getList = async () => {
  55. list.value = await AreaApi.getAreaTree()
  56. }
  57. /** 添加/修改操作 */
  58. const formRef = ref()
  59. const openForm = () => {
  60. formRef.value.open()
  61. }
  62. /** 初始化 **/
  63. onMounted(() => {
  64. getList()
  65. })
  66. </script>