vue实现课表，不同课程颜色不同

vue实现课表，不同课程颜色不同

课表数据是一个数组，数组中每个元素是每一天的第一节。如下：

claimList: [{
        startTime: '8:00',
        endTime: '8:45',
        monday: '数学',
        tuesday: '语文',
        wednesday: '政治',
        thursday: '地理',
        friday: '政治',
        saturday: '英语',
        sunday: '化学',
      }, { 
        startTime: '8:00',
        endTime: '8:45',
        monday: '数学',
        tuesday: '语文',
        wednesday: '政治',
        thursday: '地理',
        friday: '政治',
        saturday: '英语',
        sunday: '化学',
       
      }, {
        
      }]

实现效果：

实现思路：

在遍历的时候拿到表格里面的值

<div class="div" :style="{
              'background-color': getcolorb(itemv.monday),
              color: getcolort(itemv.monday)
            }">{{ itemv.monday }}</div>

然后在方法里面进行字段匹配

 textStyle(name) {
      switch (name) {
        case "数学":
          return "#01D0A6"
        case "语文":
          return "#CC689C"
        case "英语":
          return "#0A2440"
        case "化学":
          return "#6E97E8"
        case "生物":
          return "#1BCB41"
        case "政治":
          return "#C01240"
        case "历史":
          return "#ff40240Af"
       
      }
    },

实现完整代码：

<template>
  <div classs="">
    <table align="center">
      <thead style="height: 30px">
        <tr style="height: 30px">
          <th style="width: auto" width="48"></th>
          <th style="height: 30px" v-for="(item, index) in weekList" :key="index">
            <p style="font-size: 1px; color: #c0c0c1">
              {{ item.name }}
            </p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(itemv, indexv) in claimList" :key="indexv">
          <td>
            <div class="time">{{ indexv + 1 }}</div>
            <div class="time">
              {{ itemv.startTime }}
            </div>
            <div class="time">
              {{ itemv.endTime }}
            </div>
          </td>
          <td>
            <div class="div" :style="{
              'background-color': getcolorb(itemv.monday),
              color: getcolort(itemv.monday)
            }">{{ itemv.monday }}</div>
          </td>
          <td>
            <div class="div" :style="{
              'background-color': getcolorb(itemv.tuesday),
              color: getcolort(itemv.tuesday),
            }">{{ itemv.tuesday }}</div>
          </td>
          <td>
            <div class="div" :style="{
              'background-color': getcolorb(itemv.wednesday),
              color: getcolort(itemv.wednesday),
            }">{{ itemv.wednesday }}</div>
          </td>
          <td>
            <div class="div" :style="{
              'background-color': getcolorb(itemv.thursday),
              color: getcolort(itemv.thursday),
            }">{{ itemv.thursday }}</div>
          </td>
          <td>
            <div class="div" :style="{
              'background-color': getcolorb(itemv.friday),
              color: getcolort(itemv.friday),
            }">{{ itemv.friday }}</div>
          </td>
          <td>
            <div class="div" :style="{
              'background-color': getcolorb(itemv.saturday),
              color: getcolort(itemv.saturday),
            }">{{ itemv.saturday }}</div>
          </td>
          <td>
            <div class="div" :style="{
              'background-color': getcolorb(itemv.sunday),
              color: getcolort(itemv.sunday),
            }">{{ itemv.sunday }}</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'lessonIndex',
  data() {
    return {
      weekList: [
        { name: '周一' },
        { name: '周二' },
        { name: '周三' },
        { name: '周四' },
        { name: '周五' },
        { name: '周六' },
        { name: '周日' },
      ],
      claimList: [{
        startTime: '8:00',
        endTime: '8:45',
        monday: '数学',
        tuesday: '语文',
        wednesday: '政治',
        thursday: '地理',
        friday: '政治',
        saturday: '英语',
        sunday: '化学',
      }, {
        startTime: '8:00',
        endTime: '8:45',
        monday: '历史',
        tuesday: '语文',
        wednesday: '政治',
        thursday: '数学',
        friday: '地理',
        saturday: '生物',
        sunday: '化学',
      }, {
        startTime: '8:00',
        endTime: '8:45',
        monday: '数学',
        tuesday: '政治',
        wednesday: '语文',
        thursday: '数学',
        friday: '英语',
        saturday: '生物',
        sunday: '政治',
      }, {
        startTime: '8:00',
        endTime: '8:45',
        monday: '历史',
        tuesday: '英语',
        wednesday: '语文',
        thursday: '数学',
        friday: '地理',
        saturday: '数学',
        sunday: '英语',
      }, {
        startTime: '8:00',
        endTime: '8:45',
        monday: '历史',
        tuesday: '语文',
        wednesday: '政治',
        thursday: '数学',
        friday: '地理',
        saturday: '生物',
        sunday: '化学',
      }, {
        startTime: '8:00',
        endTime: '8:45',
        monday: '数学',
        tuesday: '政治',
        wednesday: '语文',
        thursday: '数学',
        friday: '英语',
        saturday: '生物',
        sunday: '政治',
      },]
    }
  },
  components: {

  },
  methods: {
    // 返回字体样式
    textStyle(name) {
      switch (name) {
        case "数学":
          return "#01D0A6"
        case "语文":
          return "#CC689C"
        case "英语":
          return "#0A2440"
        case "化学":
          return "#6E97E8"
        case "生物":
          return "#1BCB41"
        case "政治":
          return "#C01240"
        case "历史":
          return "#ff40240Af"
       
      }
    },
    //字体颜色
    getcolort(name) {
      console.log(name, 123);
      let color = this.textStyle(name)
      return color
    },
    // 背景色
    getcolorb(name) {
      let color = this.backStyle(name)
      return color
    },
    // 返回背景样式
    backStyle(name) {
      switch (name) {
        case "数学":
          return "#F8F6E1"
        case "语文":
          return "#E4DFE6"
        case "英语":
          return "#E0E4E7"
        case "化学":
          return "#E3F7E5"
        case "生物":
          return "#E2F5DF"
        case "政治":
          return "#F7E1E7"
        case "历史":
          return "#F7E1E7"
      }
    }

  },
  created() {

  },
}
</script>

<style scoped>
table {
  border: 1px solid #f3f3f3;
}

td {
  border: 1px solid #f3f3f3;
  width: 200px;
  height: 70px;
  font-size: 12px;
}

.time {
  color: #0d0d0e;
  text-align: center;
  font-size: 5px
}

.div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 2px;
  height: 100%;
}
</style>