面试题：Vue动态表格模板语法与交互优化

Question

在构建Vue动态表格时，表格数据通过API异步获取。数据结构为数组，数组内对象有'productId'、'productName'、'price'和'stock'属性。要求：1. 使用模板语法展示表格，表头为'产品ID'、'产品名称'、'价格'和'库存'。2. 当库存小于10时，该行文字显示为红色。3. 实现点击某一行，弹出一个包含该行产品所有信息的提示框，使用Vue的事件修饰符优化该交互逻辑，写出完整的Vue组件代码。

Answer 1

<template>
  <table>
    <thead>
      <tr>
        <th>产品ID</th>
        <th>产品名称</th>
        <th>价格</th>
        <th>库存</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index" @click.prevent="showDetails(item)">
        <td>{{ item.productId }}</td>
        <td>{{ item.productName }}</td>
        <td>{{ item.price }}</td>
        <td :style="{ color: item.stock < 10? 'red' : 'inherit' }">{{ item.stock }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    };
  },
  created() {
    // 模拟异步获取数据
    setTimeout(() => {
      this.tableData = [
        { productId: 1, productName: '产品1', price: 100, stock: 5 },
        { productId: 2, productName: '产品2', price: 200, stock: 15 }
      ];
    }, 1000);
  },
  methods: {
    showDetails(item) {
      alert(`产品ID: ${item.productId}\n产品名称: ${item.productName}\n价格: ${item.price}\n库存: ${item.stock}`);
    }
  }
};
</script>