vue table隐藏列
在Vue.js中使用表格组件时,可以通过设置列的"visible"属性来隐藏某一列。例如,在使用element-ui的el-table组件时,可以在每一列的column配置中设置"show-overflow-tooltip"来控制是否显示该列。
<el-table :data="tableData" border>
<el-table-column prop="name" label="Name" :show-overflow-tooltip="false"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
如果需要在运行时动态控制列的显示隐藏,可以在vue组件的data中设置一个变量来控制列的显示隐藏
data() {
return {
visible: true,
tableData: [{
name: 'John Doe',
address: 'New York No. 1 Lake Park'
}]
}
},
然后在template中使用这个变量
<el-table :data="tableData" border>
<el-table-column prop="name" label="Name" :show-overflow-tooltip="!visible"></el-table-column>
<el-table-column prop="address" label="Address" v-if="visible"></el-table-column>
</el-table>
在这个例子中,当visible变量为false时,address列将被隐藏。