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>
相关推荐
ZC跨境爬虫12 分钟前
跟着 MDN 学CSS day_32：(Web字体深度解析与实践指南)
前端·javascript·css·ui·html
sugar__salt16 分钟前
JavaScript 数组去重全解：6 种核心方法
javascript
SEO_juper22 分钟前
JavaScript 渲染：AI 智能体无法读取，直接影响收录
开发语言·前端·javascript·aigc·seo·跨境电商·geo
whuhewei24 分钟前
一道React缓存的题目
javascript·react.js
i220818 Faiz Ul32 分钟前
在线预约导游|基于SSM+vue的在线预约导游系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·在线预约导游系统
ZC跨境爬虫33 分钟前
跟着 MDN 学CSS day_35：浮动布局完全指南
前端·css·ui·html·tensorflow
不羁的木木36 分钟前
Form Kit（卡片开发服务）学习笔记03-卡片UI开发与数据更新
笔记·学习·ui
何何____40 分钟前
js的数据存储机制
开发语言·前端·javascript·ecmascript
祭曦念1 小时前
ArkUI声明式UI入门：从XML到声明式的思维转变
xml·ui·鸿蒙
云水一下1 小时前
JavaScript 从零基础到精通系列：对象、数组与 ES6 数据操作利器
前端·javascript
热门推荐
01GitHub 镜像站点02DeepSeek V4 + Claude Code thinking mode 400 错误修复方案03【AI】2026 年具身智能模型和世界模型总结04Codex 接入 DeepSeek API 完整配置文档05【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南08几个好用的ip纯净度检测网站09CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）10API Key 登录 Codex 也能用插件了，还支持会话删除和导出