vue el-table列显隐
时间: 2023-11-16 14:07:38 浏览: 57
Vue的el-table列显隐可以通过设置el-table-column的属性来实现。具体方法如下:
1. 在el-table-column中添加v-if或v-show指令,根据需要显示或隐藏列。
2. 在el-table-column中添加prop属性,指定该列对应的数据字段。
3. 在el-table中添加:column-chooser属性,开启列选择器功能。
4. 在el-table中添加@visible-change事件,监听列选择器的显示状态变化。
5. 在@visible-change事件中,通过this.$refs.table.columns获取所有列的信息,根据需要显示或隐藏列。
例如,如果要隐藏姓名列,可以在el-table-column中添加v-if指令,并在el-table中添加:column-chooser和@visible-change事件,代码如下:
<el-table ref="table" :data="tableData" :column-chooser="true" @visible-change="handleVisibleChange">
<el-table-column label="姓名" prop="name" v-if="showNameColumn" />
<el-table-column label="年龄" prop="age" />
<el-table-column label="性别" prop="gender" />
</el-table>
在methods中添加handleVisibleChange方法,代码如下:
methods: {
handleVisibleChange(visibleColumns) {
this.showNameColumn = visibleColumns.some(column => column.property === 'name');
}
}
这样,当用户在列选择器中取消勾选姓名列时,该列就会被隐藏。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)