如何通过编程控制隐藏列的显示与否？

在Vue.js配合Element UI的`<el-table>`组件中，你可以通过数据绑定的方式来控制列的显示状态。下面是一种常见的做法：

1. **定义数据源**：
在你的组件的数据(`data`)中，为每个列定义一个布尔值，表示是否应该显示。初始时，将隐藏列的显示状态设置为`false`。

   data() {
     return {
       columns: [
         { prop: 'column1', visible: true },  // 显示的列
         { prop: 'hiddenColumn', visible: false }  // 隐藏的列
         ...
       ]
     };
   }

2. **响应式控制**：
使用`v-if`或`v-show`指令来条件渲染列。对于`visible`为`true`的列，它们会显示；反之则隐藏。

   <el-table-column v-for="(col, index) in columns" :key="index" :prop="col.prop" :label="col.label">
     <template #default="{ row }">
       <span v-if="col.visible">{{ row[col.prop] }}</span>  <!-- 只有当col.visible为真时才显示内容 -->
     </template>
   </el-table-column>

3. **控制方法**：
如果需要在程序运行过程中动态改变列的显示状态，可以创建一个方法接收新的显示状态，然后更新对应的数据。

   methods: {
     toggleColumnVisibility(index) {
       this.columns[index].visible = !this.columns[index].visible;
     }
   }

现在你可以通过`toggleColumnVisibility`方法来切换指定列的可见性了。