1. Toy模板网首页
  2. > Toy博客

el-table动态生成多级表头的表格（js + ts）

10月前 作者：qq_37344867 分类：Toy博客 阅读(49) 违法举报

这篇具有很好参考价值的文章主要介绍了el-table动态生成多级表头的表格（js + ts）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

展示形式：
el-table动态生成多级表头的表格（js + ts）,vue,vue.js,前端,elementui
详细代码：
（js）

<template>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="题目信息" align="center">
          <el-table-column prop="questionName" label="题目名称"></el-table-column>
          <el-table-column prop="fullScore" label="满分"></el-table-column>
          <el-table-column prop="gradeAvg" label="年级均分"></el-table-column>
          <el-table-column prop="gradeScoreRate" label="年级分数线"></el-table-column>
        </el-table-column>
        <el-table-column v-for="classInfo in classHeaders" :key="classInfo.classScoreId">
          <template #header>
            {{ classInfo.className }}
          </template>
          <el-table-column label="班级均分" align="center">
            <template #default="{ row }">{{ getCellValue(row, classInfo, 'classAvg') }}</template>
          </el-table-column>
          <el-table-column label="班级分数线" align="center">
            <template #default="{ row }">{{ getCellValue(row, classInfo, 'classScoreRate') }}</template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import { reactive } from 'vue';
  
  export default {
    data() {
      return {
        tableData: reactive([
  {
    id: 1,
    questionId: 1,
    questionName: '填空题',
    fullScore: 10,
    gradeAvg: 8,
    gradeScoreRate: 0.8,
    questionClassVOList: [{
      classScoreId: 1,
      className: '一班',
      classAvg: 7,
      classScoreRate: 0.7
    }, {
      classScoreId: 2,
      className: '二班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 3,
      className: '三班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 4,
      className: '四班',
      classAvg: 8,
      classScoreRate: 0.8
    }]
  }, {
    id: 2,
    questionId: 2,
    questionName: '选择题',
    fullScore: 10,
    gradeAvg: 8,
    gradeScoreRate: 0.8,
    questionClassVOList: [{
      classScoreId: 1,
      className: '一班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 2,
      className: '二班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 3,
      className: '三班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 4,
      className: '四班',
      classAvg: 8,
      classScoreRate: 0.8
    }]
  }, {
    id: 3,
    questionId: 3,
    questionName: '判断题',
    fullScore: 10,
    gradeAvg: 8,
    gradeScoreRate: 0.8,
    questionClassVOList: [{
      classScoreId: 1,
      className: '一班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 2,
      className: '二班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 3,
      className: '三班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 4,
      className: '四班',
      classAvg: 8,
      classScoreRate: 0.8
    }]
  }, {
    id: 4,
    questionId: 4,
    questionName: '填空题',
    fullScore: 10,
    gradeAvg: 8,
    gradeScoreRate: 0.8,
    questionClassVOList: [{
      classScoreId: 1,
      className: '一班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 2,
      className: '二班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 3,
      className: '三班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 4,
      className: '四班',
      classAvg: 8,
      classScoreRate: 0.8
    }]
  }, {
    id: 5,
    questionId: 5,
    questionName: '简答题',
    fullScore: 10,
    gradeAvg: 8,
    gradeScoreRate: 0.8,
    questionClassVOList: [{
      classScoreId: 1,
      className: '一班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 2,
      className: '二班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 3,
      className: '三班',
      classAvg: 8,
      classScoreRate: 0.8
    }, {
      classScoreId: 4,
      className: '四班',
      classAvg: 8,
      classScoreRate: 0.8
    }]
  }
])  // 你的数据结构
      };
    },
    computed: {
      classHeaders() {
        // 假设每个问题类型下的班级信息结构是一样的，取第一个问题类型下的班级信息来生成表头
        const firstQuestion = this.tableData[0];
        if (firstQuestion) {
          return firstQuestion.questionClassVOList;
        }
        return [];
      }
    },
    methods: {
      getCellValue(row, classInfo, prop) {
        const classData = row.questionClassVOList.find(item => item.classScoreId === classInfo.classScoreId);
        return classData ? classData[prop] : '';
      }
    }
  };
  </script>
  
  <style>
  /* 样式可以根据你的需求进行调整 */
  </style>

（ts）文章来源地址https://www.toymoban.com/news/detail-682633.html

<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="题目信息" align="center">
                <el-table-column prop="questionName" label="题目名称"></el-table-column>
                <el-table-column prop="fullScore" label="满分"></el-table-column>
                <el-table-column prop="gradeAvg" label="年级均分"></el-table-column>
                <el-table-column prop="gradeScoreRate" label="年级分数线"></el-table-column>
            </el-table-column>
            <el-table-column v-for="classInfo in classHeaders" :key="classInfo.classScoreId">
                <template #header>
                    {{ classInfo.className }}
                </template>
                <el-table-column label="班级均分" align="center">
                    <template #default="{ row }">{{ getCellValue(row, classInfo, 'classAvg') }}</template>
                </el-table-column>
                <el-table-column label="班级分数线" align="center">
                    <template #default="{ row }">{{ getCellValue(row, classInfo, 'classScoreRate') }}</template>
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';

interface ClassInfo {
    classScoreId: number;
    className: string;
    classAvg: number;
    classScoreRate: number;
}

interface QuestionClass {
    questionClassVOList: ClassInfo[];
}

interface TableRow extends QuestionClass {
    questionId: number;
    questionName: string;
    fullScore: number;
    gradeAvg: number;
    gradeScoreRate: number;
}

const tableData = reactive<TableRow[]>([
    {
        questionId: 1,
        questionName: '填空题',
        fullScore: 10,
        gradeAvg: 8,
        gradeScoreRate: 0.8,
        questionClassVOList: [{
            classScoreId: 1,
            className: '一班',
            classAvg: 7,
            classScoreRate: 0.7
        }, {
            classScoreId: 2,
            className: '二班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 3,
            className: '三班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 4,
            className: '四班',
            classAvg: 8,
            classScoreRate: 0.8
        }]
    }, {
        questionId: 2,
        questionName: '选择题',
        fullScore: 10,
        gradeAvg: 8,
        gradeScoreRate: 0.8,
        questionClassVOList: [{
            classScoreId: 1,
            className: '一班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 2,
            className: '二班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 3,
            className: '三班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 4,
            className: '四班',
            classAvg: 8,
            classScoreRate: 0.8
        }]
    }, {
        questionId: 3,
        questionName: '判断题',
        fullScore: 10,
        gradeAvg: 8,
        gradeScoreRate: 0.8,
        questionClassVOList: [{
            classScoreId: 1,
            className: '一班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 2,
            className: '二班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 3,
            className: '三班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 4,
            className: '四班',
            classAvg: 8,
            classScoreRate: 0.8
        }]
    }, {
        questionId: 4,
        questionName: '填空题',
        fullScore: 10,
        gradeAvg: 8,
        gradeScoreRate: 0.8,
        questionClassVOList: [{
            classScoreId: 1,
            className: '一班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 2,
            className: '二班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 3,
            className: '三班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 4,
            className: '四班',
            classAvg: 8,
            classScoreRate: 0.8
        }]
    }, {
        questionId: 5,
        questionName: '简答题',
        fullScore: 10,
        gradeAvg: 8,
        gradeScoreRate: 0.8,
        questionClassVOList: [{
            classScoreId: 1,
            className: '一班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 2,
            className: '二班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 3,
            className: '三班',
            classAvg: 8,
            classScoreRate: 0.8
        }, {
            classScoreId: 4,
            className: '四班',
            classAvg: 8,
            classScoreRate: 0.8
        }]
    }
])

const classHeaders = computed<ClassInfo[]>(() => {
    const firstQuestion = tableData[0];
    if (firstQuestion) {
        return firstQuestion.questionClassVOList;
    }
    return [];
});

const getCellValue = (row: TableRow, classInfo: ClassInfo, prop: keyof ClassInfo) => {
    const classData = row.questionClassVOList.find(item => item.classScoreId === classInfo.classScoreId);
    return classData ? classData[prop] : '';
};
</script>
  
<style lang="scss" scoped>
</style>

到了这里，关于el-table动态生成多级表头的表格（js + ts）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包