表格显示不同数据的优化方法

表格显示数据的优化方法

实际开发过程中常遇到在同一个表格中要在不同的情况下显示不同的数据的问题。

• 一个开发需求
  • 有 A B C 三种情况，同时只能存在一种
  • 需要你在不同情况下显示不同的参数
  • 我们这里模拟了后台数据，显示参数和条件判断也不多，但是真实情况比这个复杂的多

<template>
  <div>
    <div v-if="type == 'A'">
      <tr v-for="(item, i) in data" :key="i">
        <td class="td">{{ item.name }}</td>
        <td class="td">{{ item.age }}</td>
        <td class="td">{{ item.height }}</td>
      </tr>
    </div>
    <div v-if="type == 'B'">
      <tr v-for="(item, i) in data" :key="i">
        <td class="td">{{ item.name }}</td>
        <td class="td">{{ item.age }}</td>
      </tr>
    </div>
    <div v-if="type == 'C'">
      <tr v-for="(item, i) in data" :key="i">
        <td class="td">{{ item.height }}</td>
      </tr>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    type: "A",
    data: [
      // 模拟后台数据
      {
        name: "lazy",
        age: 24,
        height: 175,
      },
      {
        name: "lazy",
        age: 24,
        height: 175,
      },
      {
        name: "lazy",
        age: 24,
        height: 175,
      },
      {
        name: "lazy",
        age: 24,
        height: 175,
      },
    ],
  }),
};
</script>

• 这里我们根据v-if来区分不同的情况，这不仅浪费性能并且让html元素臃肿
• 我的想法是用数组将需要显示的参数保存起来，然后进行for循环当作数据的参数名
• 这样我们只要根据不同情况切换不同的数组就可以了

<template>
  <div>
    <tr v-for="(item, i) in data" :key="i">
      <td class="td" v-for="(title, index) in array" :key="index">
        {{ item[title] }}
      </td>
    </tr>
  </div>
</template>

<script>
export default {
  data: () => ({
    type: "A",
    data: [
      {
        name: "lazy",
        age: 24,
        height: 175,
      },
      {
        name: "lazy",
        age: 24,
        height: 175,
      },
      {
        name: "lazy",
        age: 24,
        height: 175,
      },
      {
        name: "lazy",
        age: 24,
        height: 175,
      },
    ],
    array: ["name", "age", "height"],
    ATitles: ["name", "age", "height"],
    BTitles: ["name", "age"],
    CTitles: ["height"],
  }),
  watch: {
    type(val) {
      console.log(val)
      if (val == "A") {
        this.array = this.ATitles;
      } else if (val == "B") {
        this.array = this.BTitles;
      } else {
        this.array = this.CTitles;
      }
    },
  },
};
</script>

• 当然我这里只写了表格的数据，事实情况下表头也是要更着变化的，同理就可以了。