使用el-table :tree-props="{ children: 'items', hasChildren: 'hasChildren' }" 做带有展开行的表格时 一点展开行 所有的展开行都会打开 怎么能只打开一个?
时间: 2023-05-12 11:05:20 浏览: 150
您可以使用 "expand-row-keys" 属性来控制展开行的状态。在您的 el-table 组件中添加 "expand-row-keys" 属性,并将其绑定到一个数组。当您展开一行时,将该行的 key 添加到该数组中。这样,只有添加到该数组中的行才会展开,其他行将保持关闭状态。
例如:
<el-table
:data="tableData"
:tree-props="{ children: 'items', hasChildren: 'hasChildren' }"
:expand-row-keys="expandedKeys"
>
<!-- 表格列 -->
</el-table>
data() {
return {
tableData: [
{ id: 1, name: 'Parent 1', hasChildren: true, items: [
{ id: 2, name: 'Child 1-1', hasChildren: false },
{ id: 3, name: 'Child 1-2', hasChildren: false }
]},
{ id: 4, name: 'Parent 2', hasChildren: true, items: [
{ id: 5, name: 'Child 2-1', hasChildren: false },
{ id: 6, name: 'Child 2-2', hasChildren: false }
]}
],
expandedKeys: []
}
}
在这个例子中,我们将 "expand-row-keys" 属性绑定到 "expandedKeys" 数组。当您展开一个行时,将该行的 id 添加到 "expandedKeys" 数组中。只有添加到该数组中的行才会展开,其他行将保持关闭状态。