控制el-table-column显示
时间: 2023-11-11 07:57:31 浏览: 47
可以通过设置`el-table-column`的`show`属性来控制其显示与隐藏。如果`show`属性的值为`true`,则该列会显示;如果`show`属性的值为`false`,则该列会隐藏。
例如,以下代码演示了如何使用`show`属性来控制`el-table-column`的显示:
```html
template>
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="name"
label="Name"
:show="showNameColumn"
></el-table-column>
<el-table-column
prop="age"
label="Age"
:show="showAgeColumn"
></el-table-column>
<!-- 其他列... -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
// 其他数据...
],
showNameColumn: true,
showAgeColumn: false,
};
},
};
</script>
```
在上面的代码中,`showNameColumn`为`true`,所以“Name”列会被显示出来;`showAgeColumn`为`false`,所以“Age”列会被隐藏起来。