<template> <el-form class="tableForm" ref="tableForm" :model="formModel"> <el-table :data="formModel.list" v-loading="loading" :max-height="200" element-loading-text="数据加载中..." :span-method="objectSpanMethod" :border="true" > <el-table-column label="设施类型" show-overflow-tooltip> <template #default> <span>{{ props.name }}</span> </template> </el-table-column> <el-table-column label="设施名称" prop="itemName" show-overflow-tooltip /> <el-table-column label="设施面积㎡" prop="facilityArea" /> <el-table-column :label="props.name === '储存设施' ? '调蓄量m³' : '有效调蓄深度m'" prop="effectiveStorageDepth" /> <el-table-column label="设施服务面积㎡" prop="facilityServiceArea" /> <el-table-column label="污染去除率(%,以SS计)" prop="pollutionRemovalRate" /> <el-table-column label="污染去除率推荐值(%,以SS计)"> <template #default="{ row }"> <span>{{ `${row.downValue}-${row.upValue}` }}</span> </template> </el-table-column> </el-table> </el-form> </template> <script setup> const { proxy } = getCurrentInstance(); import useTable from './mixins'; const { loading, formModel, objectSpanMethod } = useTable(proxy); const props = defineProps({ name: { type: String, default: '', }, list: { type: Array, default: () => {}, }, }); </script> <style lang="scss" scoped></style>