用uniapp写一个成绩表，包括总分，平均分等

本文链接：https://blog.csdn.net/weixin_42317757/article/details/130915284

用uniapp写一个学生成绩表，包括总分，平均分等

1.实现思路

创建一个成绩表页面，可以使用uniapp提供的组件来实现。
在页面中创建一个表格，可以使用uniapp提供的table组件来实现。表格包括以下数据：
- 学生姓名
- 语文成绩
- 数学成绩
- 英语成绩
- 总分
- 平均分
在页面中定义一个数组，用于存储学生的成绩数据。
使用v-for指令来循环渲染表格，将数据逐一显示在表格中。
使用计算属性来计算每个学生的总分和平均分。
添加一个按钮，用于导出成绩表，可以使用uniapp提供的导出功能来实现。

2.代码示例

<template>
  <view class="scoreTable">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
          <th>总分</th>
          <th>平均分</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in scoreList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.chinese }}</td>
          <td>{{ item.math }}</td>
          <td>{{ item.english }}</td>
          <td>{{ getTotalScore(item) }}</td>
          <td>{{ getAvgScore(item) }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportScoreTable">导出成绩表</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scoreList: [
        { name: "张三", chinese: 80, math: 85, english: 90 },
        { name: "李四", chinese: 75, math: 80, english: 85 },
        { name: "王五", chinese: 90, math: 85, english: 80 }
      ]
    };
  },
  methods: {
    // 导出成绩表
    exportScoreTable() {
      // TODO：使用uniapp提供的导出功能导出成绩表
    },
    // 计算总分
    getTotalScore(item) {
      return item.chinese + item.math + item.english;
    },
    // 计算平均分
    getAvgScore(item) {
      return this.getTotalScore(item) / 3;
    }
  }
};
</script>

<style>
.scoreTable {
  padding: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #000;
  text-align: center;
  padding: 10px;
}
thead {
  background-color: #eee;
}
</style>