vue table 两个列 if判断 联动

您好！对于Vue中的表格，如果需要在两列之间进行if判断的联动，可以使用计算属性和watch来实现。

首先，在Vue组件中定义一个数据属性，用于存储联动的条件值。例如，我们将条件值存储在data中的`condition`属性中。然后，在表格的列定义中，使用v-if指令来根据条件值显示或隐藏列。

接下来，我们可以使用计算属性来根据条件值生成联动的结果。计算属性会根据依赖的数据自动更新。在这个例子中，我们可以通过`condition`的值来计算出需要显示的列的列表。然后，在表格的列定义中，使用v-for指令来渲染这个列表。

最后，我们可以使用watch来监听条件值的变化，并在变化时更新需要显示的列的列表。

下面是一个示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th v-if="showColumn2">Column 2</th>
          <th v-if="showColumn3">Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.column1 }}</td>
          <td v-if="showColumn2">{{ item.column2 }}</td>
          <td v-if="showColumn3">{{ item.column3 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: 'A',
      tableData: [
        { id: 1, column1: 'Value 1', column2: 'Value 2', column3: 'Value 3' },
        { id: 2, column1: 'Value 4', column2: 'Value 5', column3: 'Value 6' },
      ],
    };
  },
  computed: {
    showColumn2() {
      return this.condition === 'A';
    },
    showColumn3() {
      return this.condition === 'B';
    },
  },
  watch: {
    condition(newValue) {
      // 在条件值变化时更新需要显示的列的列表
      // 可以在这里进行一些其他操作，如异步请求数据等
    },
  },
};
</script>

在这个示例中，当`condition`的值为'A'时，只会显示Column 1和Column 2；当`condition`的值为'B'时，只会显示Column 1和Column 3。

希望对您有所帮助！如果有任何问题，请随时提问。