Vue.js表格隐藏特定列：使用 v-for 和 v-if

在 Vue 中，你可以使用v-for指令来遍历tableConfig数组，并使用条件语句来判断id是否为1、2或3，从而设置hide为true。下面是一个示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="config in tableConfig" :key="config.id" v-if="config.id !== 1 && config.id !== 2 && config.id !== 3">
            {{ config.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td v-for="config in tableConfig" :key="config.id" v-if="config.id !== 1 && config.id !== 2 && config.id !== 3">
            {{ item[config.prop] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableConfig: [
        {
          id: 1,
          label: "期间",
          prop: "period",
          hide: true,
        },
        {
          id: 2,
          label: "所属单位",
          prop: "logtComPersOrgName",
          hide: true,
        },
        {
          id: 3,
          label: "所属节点",
          prop: "md03LogtComPersNodeName",
          hide: true,
        },
      ],
      tableData: [
        // Your table data here
      ],
    };
  },
};
</script>

在上面的代码中，我们使用了v-if指令来判断config.id是否为1、2或3，如果是则不渲染对应的表头和表格单元格。这样，id为1、2或3的hide属性会被设置为true，达到了隐藏的效果。