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'; // 确保导入 ElTableColumn const 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 的列。选择哪种方法取决于你的具体需求和场景。如果逻辑较为简单，使用计算属性可能更直观；如果逻辑复杂或需要基于多种条件动态生成列，使用方法可能更灵活。