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>
相关推荐
杰克尼2 小时前
vue_day06
前端·javascript·vue.js
DcTbnk2 小时前
ESM (放到打包里 import) 和 IIFE (URL 动态 loadScript)
前端·javascript
San302 小时前
深入理解 JavaScript 中的 Symbol：独一无二的值
前端·javascript·ecmascript 6
就叫飞六吧2 小时前
css+js 前端无限画布实现
前端·javascript·css
IT 前端 张2 小时前
Uniapp全局显示 悬浮组件/无需单页面引入
前端·javascript·uni-app
上车函予3 小时前
geojson-3d-renderer：从原理到实践，打造高性能3D地理可视化库
前端·vue.js·three.js
Lsx_3 小时前
🔥Vite+ElementPlus 自动按需加载与主题定制原理全解析
前端·javascript·element
零一科技3 小时前
Vue3拓展：实现原理 - 浅析
前端·vue.js
抱琴_3 小时前
【Vue3】从混乱到有序：我用 1 个 Vue Hooks 搞定大屏项目所有定时任务
前端·vue.js
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07Linux下V2Ray安装配置指南08Spring Boot 4.0 发布总结：新特性、依赖变更与升级指南09Labelme从安装到标注：零基础完整指南10全球最强模型Grok4，国内已可免费使用！（附教程）