纯前端VUE练习表格项目

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column label="编号" type="index" width="100">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="age" label="年龄" width="180">
    </el-table-column>
    <el-table-column prop="gender" label="性别" width="180">
      <template slot-scope="scope">
        <span v-if="scope.row.gender == 1">男</span>
        <span v-if="scope.row.gender == 2">女</span>
      </template>
    </el-table-column>
    <el-table-column prop="score" label="成绩" width="180">
    </el-table-column>
    <el-table-column prop="score" label="等级" width="180">
      <template slot-scope="scope">
        <span v-if="scope.row.score < 60">不及格</span>
        <span v-if="scope.row.score > 60 && scope.row.score < 85">及格</span>
        <span v-if="scope.row.score >= 85">优秀</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: "Tom",
        age: 20,
        gender: 1,
        score: 78
      }, {
        name: "Rose",
        age: 18,
        gender: 2,
        score: 86
      }, {
        name: "Jerry",
        age: 26,
        gender: 1,
        score: 90
      }, {
        name: "Tony",
        age: 30,
        gender: 1,
        score: 52
      }]
    }
  }
}
</script>