构建动态社区人口统计表：前端技术实践

# 使用 npm 创建 Vite 项目
npm create vue@latest huangshigang-population-table
 
# 进入项目目录
cd huangshigang-population-table
 
# 安装依赖
npm install
 
# 安装 Element Plus 和图标库
npm install element-plus @element-plus/icons-vue
 
# 启动开发服务器
npm run dev

// 定义一个人口统计项
export interface PopulationItem {
  category: string; // 人口类别，如："常住人口", "流动人口", "60岁以上老人"
  count: number;    // 该类别的人数
}
 
// 定义一个社区的数据
export interface CommunityData {
  id: number;       // 社区唯一ID
  name: string;     // 社区名称，如："沈家营社区", "黄石港社区"
  populations: PopulationItem[]; // 该社区的人口统计数组
}
 
// 为了方便表格渲染，我们也可以定义一个扁平化的数据结构
// 例如：{ id: 1, name: '沈家营社区', 常住人口: 8540, 流动人口: 1230, ... }
export type TableRowData = Record<string, string | number> & {
  id: number;
  name: string;
};

import { CommunityData } from '@/types';
 
// 模拟黄石港区主要社区
const communityNames = [‘沈家营社区’， ‘黄石港社区’， ‘胜阳港社区’， ‘花湖社区’， ‘红旗桥社区’];
 
// 模拟人口类别
const populationCategories = [‘常住人口’， ‘流动人口’， ‘户籍人口’， ‘60岁以上老人’， ‘18岁以下未成年人’， ‘残疾人士’];
 
export const mockCommunityData: CommunityData[] = communityNames.map((name, index) => ({
  id: index + 1,
  name,
  populations: populationCategories.map(category => ({
    category,
    // 生成随机但合理的人口数量
    count: Math.floor(Math.random() * 5000) + 3000,
  })),
}));
 
// 一个工具函数：将 CommunityData 转换为扁平的 TableRowData，便于 el-table 渲染
export function formatTableData(data: CommunityData[]): TableRowData[] {
  return data.map(community => {
    const row: TableRowData = { id: community.id, name: community.name };
    community.populations.forEach(item => {
      row[item.category] = item.count;
    });
    return row;
  });
}

 
  <div class="population-table-container">
    <h2>黄石港区各社区人口统计表</h2>
    
    <el-table
      :data="tableData"
      border
      stripe // 添加斑马纹样式
      style="width: 100%"
      @sort-change="handleSortChange" // 排序事件监听
    >
      <!-- 固定列：社区ID和名称 -->
      <el-table-column
        prop="id"
        label="社区ID"
        width="100"
        sortable="custom" // 启用自定义排序
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="社区名称"
        width="150"
        fixed="left" // 固定在最左侧，方便横向滚动时查看
      >
      </el-table-column>
 
      <!-- 动态列：遍历所有人口类别 -->
      <el-table-column
        v-for="category in populationCategories"
        :key="category"
        :prop="category"
        :label="category"
        width="130"
        sortable="custom"
      >
        <template #default="scope">
          <!-- 格式化数字显示，增加千位分隔符 -->
          {{ formatNumber(scope.row[category]) }}
        </template>
      </el-table-column>
    </el-table>
  </div>

 
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { mockCommunityData, formatTableData } from '@/data/mockData';
import type { TableRowData } from '@/types';
 
// 响应式数据
const communityData = ref<TableRowData[]>([]);
 
// 计算属性：从第一条数据中提取所有人口类别（动态生成表头）
const populationCategories = computed(() => {
  if (communityData.value.length > 0) {
    // 排除 'id' 和 'name' 属性，剩下的就是人口类别
    const firstRow = communityData.value[0];
    return Object.keys(firstRow).filter(key => key !== 'id' && key !== 'name');
  }
  return [];
});
 
// 计算属性：格式化后的表格数据
const tableData = computed(() => communityData.value);
 
// 生命周期钩子：模拟组件挂载后获取数据
onMounted(() => {
  // 在实际项目中，这里应是一个 API 调用
  // const response = await fetch('/api/community-data');
  // communityData.value = await response.json();
  
  // 当前使用模拟数据
  communityData.value = formatTableData(mockCommunityData);
});
 
// 方法：处理排序
const handleSortChange = ({ prop, order }: { prop: string; order: 'ascending' | 'descending' | null }) => {
  if (!order) {
    // 如果没有排序顺序，恢复原始数据（例如按ID排序）
    communityData.value = formatTableData(mockCommunityData);
    return;
  }
 
  communityData.value.sort((a, b) => {
    const aVal = a[prop];
    const bVal = b[prop];
    if (order === 'ascending') {
      return aVal - bVal;
    } else {
      return bVal - aVal;
    }
  });
};
 
// 方法：格式化数字
const formatNumber = (num: number) => {
  return new Intl.NumberFormat('zh-CN').format(num);
};
</script>

 
<template>
  <div>
    <!-- ... 标题 ... -->
    <div class="table-toolbar">
      <el-input
        v-model="searchKeyword"
        placeholder="输入社区名称进行搜索..."
        clearable
        style="width: 300px; margin-bottom: 20px;"
        @input="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <!-- ... 表格 ... -->
  </div>
</template>
 
<script setup>
import { Search } from '@element-plus/icons-vue';
import { ref, computed } from 'vue';
 
const searchKeyword = ref('');
const originalData = ref([]); // 保存一份原始数据
 
// 计算属性：根据搜索关键词过滤数据
const tableData = computed(() => {
  if (!searchKeyword.value) {
    return originalData.value;
  }
  const keyword = searchKeyword.value.toLowerCase();
  return originalData.value.filter(row => 
    row.name.toLowerCase().includes(keyword)
  );
});
 
// 在获取数据后，同时赋值给 originalData
onMounted(async () => {
  // ... 获取数据 ...
  originalData.value = formatTableData(mockCommunityData);
});
 
const handleSearch = () => {
  // 搜索逻辑已由计算属性 tableData 自动处理
};
</script>

 
<el-table :data="tableData" ... >
  <!-- ... 所有列 ... -->
</el-table>
 
<!-- 自定义总计行 -->
<div class="summary-row">
  <span><strong>总计</strong></span>
  <span v-for="category in populationCategories" :key="`total-${category}`">
    <strong>{{ calculateTotal(category) }}</strong>
  </span>
</div>
 
<script setup>
// ... 其他逻辑 ...
 
// 方法：计算某一列的总和
const calculateTotal = (category: string) => {
  const total = tableData.value.reduce((sum, row) => sum + (row[category] as number), 0);
  return formatNumber(total);
};
</script>
 
<style scoped>
.summary-row {
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  border-top: 2px solid #ebeef5;
  background-color: #f5f7fa;
  font-size: 14px;
}
/* 需要根据动态列的宽度调整样式，这是一个简化示例 */
</style>