vue中一个动态的表格 根据不同的状态值 判断使用不同的数据字典 并显示字典内容

可以使用 Vue 的计算属性来根据不同的状态值判断使用不同的数据字典，并根据字典内容动态显示表格内容。具体步骤如下：

1. 在 Vue 组件中定义一个对象或数组，表示状态值与对应的数据字典的映射关系。例如：

const statusDict = {
  1: {
    text: '待审核',
    color: 'orange'
  },
  2: {
    text: '已审核',
    color: 'green'
  },
  3: {
    text: '审核不通过',
    color: 'red'
  }
};

2. 在 Vue 组件中定义一个计算属性 `tableData`，根据状态值从数据字典中获取对应的文本和颜色，并将其作为表格的一列数据。例如：

<template>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td :style="{ color: item.status.color }">{{ item.status.text }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
const statusDict = {
  1: {
    text: '待审核',
    color: 'orange'
  },
  2: {
    text: '已审核',
    color: 'green'
  },
  3: {
    text: '审核不通过',
    color: 'red'
  }
};

export default {
  data() {
    return {
      data: [
        { id: 1, name: '商品1', status: 1 },
        { id: 2, name: '商品2', status: 2 },
        { id: 3, name: '商品3', status: 3 }
      ]
    };
  },
  computed: {
    tableData() {
      return this.data.map(item => {
        return {
          id: item.id,
          name: item.name,
          status: statusDict[item.status]
        };
      });
    }
  }
};
</script>

在上述代码中，通过计算属性 `tableData`，将原始数据中的状态值转换成对应的文本和颜色，并将其作为表格的一列数据显示出来。其中，`:style="{ color: item.status.color }"` 控制状态列的颜色，`item.status.text` 控制状态列的文本内容。

需要注意的是，在实际开发中，数据字典和状态值可能是从后端接口动态获取的，需要根据实际情况进行调整。