vue3 动态判断 el-table列 用 v-if 是否显示

在 Vue 3 中，如果你想根据 columns.showcolumn 动态地决定是否显示 el-table 的某列，你可以通过计算属性（computed properties）或方法来处理这个问题。这里我将展示两种常见的方法：

方法1：使用计算属性

这种方法适用于列的显示/隐藏逻辑较为简单时。你可以在 columns 对象中定义一个属性来控制是否显示某列，然后在模板中使用 v-if 结合计算属性来控制该列的渲染。

1. 定义数据和计算属性

<script setup>
import { ref, computed } from 'vue';const columns = ref({column1: {label: 'Column 1',prop: 'column1',showColumn: true  // 控制是否显示该列},column2: {label: 'Column 2',prop: 'column2',showColumn: false // 控制是否显示该列}
});// 计算属性，根据 columns.column1.showColumn 来决定是否渲染第一列
const showColumn1 = computed(() => columns.value.column1.showColumn);
// 计算属性，根据 columns.column2.showColumn 来决定是否渲染第二列
const showColumn2 = computed(() => columns.value.column2.showColumn);
</script>

      2.在模板中使用

<el-table :data="tableData"><el-table-column v-if="showColumn1" :label="columns.column1.label" prop="columns.column1.prop"></el-table-column><el-table-column v-if="showColumn2" :label="columns.column2.label" prop="columns.column2.prop"></el-table-column>
</el-table>

方法2：使用方法（动态列）

如果你需要根据更复杂的逻辑动态决定哪些列应该被渲染（例如，基于用户权限或某些条件），可以使用一个方法来动态生成列。

1. 定义数据和方法

<script setup>
import { ref } from 'vue';
import { ElTableColumn } from 'element-plus'; // 确保导入 ElTableColumnconst columns = ref([{ label: 'Column 1', prop: 'column1', showColumn: true },{ label: 'Column 2', prop: 'column2', showColumn: false }
]);const getColumns = () => {return columns.value.filter(col => col.showColumn);
};
</script>

    2.在模板中使用

<el-table :data="tableData"><el-table-column v-for="col in getColumns()" :key="col.prop" :label="col.label" :prop="col.prop"></el-table-column>
</el-table>

这两种方法都可以实现根据条件动态显示或隐藏 el-table 的列。选择哪种方法取决于你的具体需求和场景。如果逻辑较为简单，使用计算属性可能更直观；如果逻辑复杂或需要基于多种条件动态生成列，使用方法可能更灵活。