在基于if语句的datagrid视图中使用字符串填充单元格

<template>
  <div>
    <h2>DataGrid Example</h2>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Occupation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in people" :key="person.id">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
          <td :class="getOccupationClass(person)">
            {{ getOccupationString(person) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: 'John Doe', age: 30, occupation: 'Engineer' },
        { id: 2, name: 'Jane Smith', age: 25, occupation: 'Designer' },
        { id: 3, name: 'Bob Johnson', age: 35, occupation: 'Developer' },
      ],
    };
  },
  methods: {
    getOccupationString(person) {
      if (person.occupation === 'Engineer') {
        return 'Engineering Department';
      } else if (person.occupation === 'Designer') {
        return 'Design Department';
      } else {
        return 'Development Department';
      }
    },
    getOccupationClass(person) {
      if (person.occupation === 'Engineer') {
        return 'engineering';
      } else if (person.occupation === 'Designer') {
        return 'design';
      } else {
        return 'development';
      }
    },
  },
};
</script>

<style>
.engineering {
  background-color: lightblue;
}

.design {
  background-color: lightgreen;
}

.development {
  background-color: lightyellow;
}
</style>