Element-UI 番外表格组件

袅沫2025-11-25 15:47

表格组件一：

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>
相关推荐
weedsfly3 分钟前
观察者模式 vs 发布-订阅模式：从概念到实战，一次讲清楚
前端·javascript·面试
miss22 分钟前
海康威视 IoT 平台前端实战：视频流、海量设备与实时数据可视化
前端·javascript·物联网
mONESY23 分钟前
MCP 协议实战博客：跨进程、跨语言可复用 AI 工具标准化方案
javascript
糖墨夕1 小时前
第一章：为什么你要学 AI Agent？—— 从"切图仔"到全栈的进化之路
前端·javascript·vue.js
自律懒人1 小时前
ChatGPT Work 上线当天实测：GPT-5.6 Sol 把 Codex 塞进桌面应用，跨应用自动做报表和 PPT，一个指令干 3 小时的活
javascript·开源
酷酷的身影1 小时前
Managers/APConfigManager.cs
开发语言·ui·c#
不听话坏10 小时前
Ignition篇(下 一) 动态执行前的事情
开发语言·前端·javascript
pany11 小时前
做 AI 友好的开源 Vue3 模板 🌈
前端·vue.js·ai编程
小二·11 小时前
React 19 + Next.js 15 现代前端开发实战：App Router / Server Components / 流式渲染
前端·javascript·react.js
daols8812 小时前
vue 甘特图 vxe-gantt 小时视图设置日期轴每间隔 3 个小时
vue.js·甘特图·vxe-gantt
热门推荐
01GitHub 镜像站点02AI科技热点日报 | 2026年07月01日032026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？042026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf05幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南062026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026 年 AI 大模型 & AI 编程工具实战全总结09【AI】2026 年具身智能模型和世界模型总结102026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？