vue+element 一个表格里面用两个数组

在Vue.js结合Element UI的项目中，如果你需要在一个表格里同时展示两个数据数组，你可以通过v-for指令分别遍历这两个数组，给每个表格列对应的数据源。这通常在数据结构关联或需要并列表示不同类型的数据时使用。

例如，假设你有两个数组`array1`和`array2`：

// 假设这是两个数组
const array1 = [
  { id: 1, name: 'Item 1', type: 'A' },
  { id: 2, name: 'Item 2', type: 'B' },
];

const array2 = [
  { id: 3, description: 'Desc 1 for A', type: 'A' },
  { id: 4, description: 'Desc 2 for B', type: 'B' },
];

然后在你的表格组件模板里，你可以这样做：

<el-table>
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
  <!-- 如果type字段很重要，单独处理 -->
  <template v-if="isTypeColumnVisible">
    <el-table-column prop="type" label="Type"></el-table-column>
  </template>

  <!-- 使用嵌套循环显示第二个数组的信息 -->
  <template v-for="(item, index) in array1">
    <el-row :key="index">
      <el-col>{{ item.id }}</el-col>
      <el-col>{{ item.name }}</el-col>
      <el-col v-if="array2.find(a => a.type === item.type)">{{ array2[index].description }}</el-col> <!-- 使用find()查找匹配项 -->
    </el-row>
  </template>
</el-table>

在这个例子中，我们只在第一个数组的元素与第二个数组存在同类型的条件下显示第二个数组的相关描述。你可以根据实际需求调整这个逻辑。