el-table根据条件显示列
在Vue.js中使用Element UI的el-table
组件时,可以通过动态绑定列(el-table-column
)来根据条件显示或隐藏列。以下是一个简单的示例,演示如何根据条件显示列:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column v-if="showAddress" prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
}],
showAddress: true // 根据条件控制是否显示地址列
};
}
};
</script>
在这个例子中,showAddress
是一个布尔值,用来控制地址列的显示。如果showAddress
为true
,则地址列会显示;如果为false
,则不会显示地址列。你可以根据实际需求动态改变showAddress
的值来控制列的显示与隐藏。
评论已关闭