vue的table表格树形数据 当打开折叠的表格时 折叠的表格没有编辑按钮
时间: 2024-02-03 12:12:14 浏览: 187
vue可编辑表格
如果您使用的是 element-ui 的 table 组件,可以通过在列配置中添加 `render` 函数来自定义编辑按钮的显示。
在 render 函数中,可以根据当前行的数据判断该行是否处于折叠状态,如果是,则不显示编辑按钮,如果不是,则显示编辑按钮。
示例代码如下:
```javascript
columns: [
{
label: '名称',
prop: 'name'
},
{
label: '操作',
render: (h, { row, $index, store }) => {
// 判断该行是否处于折叠状态
if (store.states.expandRows.indexOf(row) === -1) {
return null; // 不显示编辑按钮
}
return (
<el-button type="primary" onClick={() => this.handleEdit(row)}>编辑</el-button>
);
}
}
]
```
在上面的代码中,`store.states.expandRows` 表示当前处于折叠状态的行,如果该行的索引不在这个数组中,则说明该行处于折叠状态,不需要显示编辑按钮。否则,显示编辑按钮,并通过 `handleEdit` 方法处理编辑操作。
注意,以上代码是基于 element-ui 2.x 的 table 组件,如果您使用的是其他组件或版本,请参考相应的文档进行修改。
阅读全文