Element-UI 番外表格组件

表格组件一：

html 复制代码

<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'projects', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="unitName"
        label="二级单位名"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="projectName"
        label="项目名称"
        width="200"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.projectName">{{ scope.row.unitName }}</span>
          <span v-else>{{ scope.row.projectName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="investmentProject"
        label="投资项目"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="projectStatus"
        label="项目状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.projectStatus)">
            {{ scope.row.projectStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="annualInvestmentPlan"
        label="年度投资计划(万元)"
        width="180"
        align="right"
      >
        <template slot-scope="scope">
          {{ scope.row.annualInvestmentPlan | formatNumber }}
        </template>
      </el-table-column>
      <el-table-column
        prop="planDocumentNumber"
        label="计划下达(备案)文号"
        width="220"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          unitName: '单位A',
          projects: [
            {
              id: 101,
              projectName: '项目A1',
              investmentProject: '基础设施',
              projectStatus: '在建',
              annualInvestmentPlan: 5000,
              planDocumentNumber: '发改投资[2023]001号'
            },
            {
              id: 102,
              projectName: '项目A2',
              investmentProject: '技术改造',
              projectStatus: '已完工',
              annualInvestmentPlan: 3200,
              planDocumentNumber: '发改投资[2023]002号'
            }
          ]
        },
        {
          id: 2,
          unitName: '单位B',
          projects: [
            {
              id: 201,
              projectName: '项目B1',
              investmentProject: '新能源',
              projectStatus: '前期',
              annualInvestmentPlan: 8000,
              planDocumentNumber: '发改投资[2023]003号'
            }
          ]
        }
      ]
    }
  },
  filters: {
    formatNumber(value) {
      if (!value) return '0'
      return value.toLocaleString()
    }
  },
  methods: {
    getStatusTagType(status) {
      const statusMap = {
        '前期': 'info',
        '在建': 'warning',
        '已完工': 'success',
        '暂停': 'danger'
      }
      return statusMap[status] || ''
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.$message({
        message: `编辑 ${row.projectName || row.unitName}`,
        type: 'info'
      })
      // 这里可以添加编辑逻辑
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.el-table {
  margin-top: 20px;
}
</style>

表格组件二：

html 复制代码

<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'projects', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="unitName"
        label="二级单位名"
        width="200"
      ></el-table-column>

      <el-table-column
        prop="projectName"
        label="项目名称"
        width="200"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.projectName">{{ scope.row.projectName }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="investmentProject"
        label="投资项目"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.investmentProject">{{ scope.row.investmentProject }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="projectStatus"
        label="项目状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.projectStatus" :type="getStatusTagType(scope.row.projectStatus)">
            {{ scope.row.projectStatus }}
          </el-tag>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="annualInvestmentPlan"
        label="年度投资计划(万元)"
        width="180"
        align="right"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.annualInvestmentPlan">{{ scope.row.annualInvestmentPlan | formatNumber }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="planDocumentNumber"
        label="计划下达(备案)文号"
        width="220"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.planDocumentNumber">{{ scope.row.planDocumentNumber }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.projectName"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          unitName: '单位A',
          projects: [
            {
              id: 101,
              projectName: '项目A1',
              investmentProject: '基础设施',
              projectStatus: '在建',
              annualInvestmentPlan: 5000,
              planDocumentNumber: '发改投资[2023]001号'
            },
            {
              id: 102,
              projectName: '项目A2',
              investmentProject: '技术改造',
              projectStatus: '已完工',
              annualInvestmentPlan: 3200,
              planDocumentNumber: '发改投资[2023]002号'
            }
          ]
        },
        {
          id: 2,
          unitName: '单位B',
          projects: [
            {
              id: 201,
              projectName: '项目B1',
              investmentProject: '新能源',
              projectStatus: '前期',
              annualInvestmentPlan: 8000,
              planDocumentNumber: '发改投资[2023]003号'
            }
          ]
        }
      ]
    }
  },
  filters: {
    formatNumber(value) {
      if (!value) return '0'
      return value.toLocaleString()
    }
  },
  methods: {
    getStatusTagType(status) {
      const statusMap = {
        '前期': 'info',
        '在建': 'warning',
        '已完工': 'success',
        '暂停': 'danger'
      }
      return statusMap[status] || ''
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.$message({
        message: `编辑 ${row.projectName}`,
        type: 'info'
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.el-table {
  margin-top: 20px;
}
.empty-cell {
  color: #999;
}
</style>

表格组件三：

java 复制代码

<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'projects', hasChildren: 'hasChildren'}"
    >
      <!-- 合并后的单位/项目名称列 -->
      <el-table-column
        prop="name"
        label="单位/项目名称"
        width="250"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.projectName" style="font-weight: bold;">
            {{ scope.row.unitName }}
          </span>
          <span v-else style="padding-left: 20px;">
            {{ scope.row.projectName }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="investmentProject"
        label="投资项目"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.investmentProject">{{ scope.row.investmentProject }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="projectStatus"
        label="项目状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.projectStatus" :type="getStatusTagType(scope.row.projectStatus)">
            {{ scope.row.projectStatus }}
          </el-tag>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="annualInvestmentPlan"
        label="年度投资计划(万元)"
        width="180"
        align="right"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.annualInvestmentPlan">{{ scope.row.annualInvestmentPlan | formatNumber }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="planDocumentNumber"
        label="计划下达(备案)文号"
        width="220"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.planDocumentNumber">{{ scope.row.planDocumentNumber }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.projectName"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          unitName: '单位A',
          projects: [
            {
              id: 101,
              projectName: '项目A1',
              investmentProject: '基础设施',
              projectStatus: '在建',
              annualInvestmentPlan: 5000,
              planDocumentNumber: '发改投资[2023]001号'
            },
            {
              id: 102,
              projectName: '项目A2',
              investmentProject: '技术改造',
              projectStatus: '已完工',
              annualInvestmentPlan: 3200,
              planDocumentNumber: '发改投资[2023]002号'
            }
          ]
        },
        {
          id: 2,
          unitName: '单位B',
          projects: [
            {
              id: 201,
              projectName: '项目B1',
              investmentProject: '新能源',
              projectStatus: '前期',
              annualInvestmentPlan: 8000,
              planDocumentNumber: '发改投资[2023]003号'
            }
          ]
        }
      ]
    }
  },
  filters: {
    formatNumber(value) {
      if (!value) return '0'
      return value.toLocaleString()
    }
  },
  methods: {
    getStatusTagType(status) {
      const statusMap = {
        '前期': 'info',
        '在建': 'warning',
        '已完工': 'success',
        '暂停': 'danger'
      }
      return statusMap[status] || ''
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.$message({
        message: `编辑 ${row.projectName}`,
        type: 'info'
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.el-table {
  margin-top: 20px;
}
.empty-cell {
  color: #999;
}
</style>

表格组件三：

html 复制代码

<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'projects', hasChildren: 'hasChildren'}"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- 合并后的单位/项目名称列 -->
      <el-table-column
        prop="name"
        label="单位/项目名称"
        width="250"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.projectName" style="font-weight: bold;">
            {{ scope.row.unitName }}
          </span>
          <span v-else style="padding-left: 20px;">
            {{ scope.row.projectName }}
          </span>
        </template>
      </el-table-column>
 
      <el-table-column
        prop="investmentProject"
        label="投资项目"
        width="150"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.investmentProject">{{ scope.row.investmentProject }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>
 
      <el-table-column
        prop="projectStatus"
        label="项目状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.projectStatus" :type="getStatusTagType(scope.row.projectStatus)">
            {{ scope.row.projectStatus }}
          </el-tag>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>
 
      <el-table-column
        prop="annualInvestmentPlan"
        label="年度投资计划(万元)"
        width="180"
        align="right"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.annualInvestmentPlan">{{ scope.row.annualInvestmentPlan | formatNumber }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>
 
      <el-table-column
        prop="planDocumentNumber"
        label="计划下达(备案)文号"
        width="220"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.planDocumentNumber">{{ scope.row.planDocumentNumber }}</span>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>
 
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.projectName"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <span v-else class="empty-cell">-</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          unitName: '单位A',
          projects: [
            {
              id: 101,
              projectName: '项目A1',
              investmentProject: '基础设施',
              projectStatus: '在建',
              annualInvestmentPlan: 5000,
              planDocumentNumber: '发改投资[2023]001号'
            },
            {
              id: 102,
              projectName: '项目A2',
              investmentProject: '技术改造',
              projectStatus: '已完工',
              annualInvestmentPlan: 3200,
              planDocumentNumber: '发改投资[2023]002号'
            }
          ]
        },
        {
          id: 2,
          unitName: '单位B',
          projects: [
            {
              id: 201,
              projectName: '项目B1',
              investmentProject: '新能源',
              projectStatus: '前期',
              annualInvestmentPlan: 8000,
              planDocumentNumber: '发改投资[2023]003号'
            }
          ]
        }
      ]
    }
  },
  filters: {
    formatNumber(value) {
      if (!value) return '0'
      return value.toLocaleString()
    }
  },
  methods: {
    getStatusTagType(status) {
      const statusMap = {
        '前期': 'info',
        '在建': 'warning',
        '已完工': 'success',
        '暂停': 'danger'
      }
      return statusMap[status] || ''
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.$message({
        message: `编辑 ${row.projectName}`,
        type: 'info'
      })
    }
  }
}
</script>
 
<style scoped>
.app-container {
  padding: 20px;
}
.el-table {
  margin-top: 20px;
}
.empty-cell {
  color: #999;
}
</style>