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>
相关推荐
_codemonster几秒前
Vue的三种使用方式对比
前端·javascript·vue.js
一起养小猫30 分钟前
Flutter for OpenHarmony 实战_魔方应用UI设计与交互优化
flutter·ui·交互·harmonyos
全栈前端老曹1 小时前
【MongoDB】Node.js 集成 —— Mongoose ORM、Schema 设计、Model 操作
前端·javascript·数据库·mongodb·node.js·nosql·全栈
低代码布道师2 小时前
Next.js 16 全栈实战（一）：从零打造“教培管家”系统——环境与脚手架搭建
开发语言·javascript·ecmascript
一位搞嵌入式的 genius2 小时前
深入 JavaScript 函数式编程：从基础到实战（含面试题解析）
前端·javascript·函数式
choke2332 小时前
[特殊字符] Python 文件与路径操作
java·前端·javascript
wqq63108552 小时前
Python基于Vue的实验室管理系统 django flask pycharm
vue.js·python·django
Deng9452013142 小时前
Vue + Flask 前后端分离项目实战：从零搭建一个完整博客系统
前端·vue.js·flask
Hello.Reader3 小时前
Flink 文件系统通用配置默认文件系统与连接数限制实战
vue.js·flink·npm
wuhen_n3 小时前
JavaScript内置数据结构
开发语言·前端·javascript·数据结构
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03OpenClaw Chrome扩展使用教程 - 浏览器中继控制04Linux下V2Ray安装配置指南05UV安装并设置国内源06openclaw配置教程（linux+局域网ollama）07Vue-skills的中文文档08让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南09使用 1panel面板 部署 php网站10Claude Code Skills 实用使用手册