el-table-column动态显示列
时间: 2023-11-04 14:05:15 浏览: 93
el-table-column可以通过动态渲染来实现动态显示列。在这个例子中,使用了Object.keys()方法获取了leave对象的所有key值列表,然后通过v-for循环遍历这个列表,动态生成el-table-column组件,并设置label属性为key值。在每个el-table-column中,使用了作用域插槽(scope)来访问每一行数据,并通过scope.row.leave[item]来获取对应列的值进行渲染。
相关问题
el-table-column动态显示隐藏
可以通过设置 el-table-column 的 prop 属性来动态控制列的显示和隐藏。具体实现方式如下:
1. 在 data 中定义一个变量,用于控制列的显示和隐藏,例如:
```
data() {
return {
showColumn: true
}
}
```
2. 在 el-table-column 中绑定 prop 属性,例如:
```
<el-table-column
prop="name"
label="姓名"
:visible="showColumn"
></el-table-column>
```
3. 在需要控制列显示和隐藏的地方,修改 showColumn 变量的值即可,例如:
```
this.showColumn = false; // 隐藏列
this.showColumn = true; // 显示列
```
el-table-column动态渲怎么判断显示隐藏
可以通过设置 el-table-column 的 prop 属性来控制列的显示和隐藏。具体来说,可以在数据中添加一个字段,用于表示该列是否需要显示,然后在 el-table-column 中使用 v-if 或者 :visible.sync 来根据该字段的值来控制列的显示和隐藏。
例如,假设数据中有一个字段 isShow,表示该列是否需要显示,那么可以这样设置 el-table-column:
```
<el-table-column
prop="name"
label="姓名"
v-if="rowData.isShow"
></el-table-column>
```
或者:
```
<el-table-column
prop="name"
label="姓名"
:visible.sync="rowData.isShow"
></el-table-column>
```
其中 rowData 是当前行的数据对象。