dy-admin-manager/src/views/teamDetail/componentCourse/infoMsgContent.vue

<template>
  <div>
    <el-table :data="list" :header-cell-style="{background: '#f5f7fa'}" max-height="250">
      <el-table-column
        prop="name"
        label="字段名"
      >
        <template slot-scope="scope">
          <div>{{nameFormat[scope.row.name] || scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="before"
        label="修改前"
      >
        <template slot-scope="scope">
          <div v-if="diff.hasOwnProperty(scope.row.name)">
            <el-tag type="danger" v-if="scope.row.before"><s>{{scope.row.before}}</s></el-tag>
          </div>
          <div v-else>{{scope.row.before}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="after"
        label="修改后"
      >
        <template slot-scope="scope">
          <div v-if="diff.hasOwnProperty(scope.row.name)">
            <el-tag type="success" v-if="scope.row.after">{{scope.row.after}}</el-tag>
          </div>
          <div v-else>{{scope.row.after}}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
const nameFormat = {
  name: '课程名称',
  actualTeacherName: '主教老师',
  teachingTeacherNames: '助教老师',
  startClassTime: '上课时间',
  teachMode: '课程类型',
  schoolName: '教学地点',
  timers: '课程时长'
}
import ObjectDiff from 'object-diff'
export default {
  props: ['before', 'after'],
  computed: {
    diff() {
      return ObjectDiff(this.before, this.after)
    },
    list() {
      const keys = Object.keys(this.before)
      const items = []
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i]
        const nextKey = keys[i + 1]
        items.push({
          name: key,
          before: this.before[key],
          after: this.before[key],
        })
      }
      return items
    }
  },
  data() {
    return {
      nameFormat
    }
  },
  mounted() {
    console.log(this.diff, this.list)
  }
}
</script>
<style lang="less" scoped>

</style>