在 Element UI 中,可以使用 expand-row-keys 属性来指定需要展开的行,并使用 expand 事件来监听展开行的事件。当用户点击展开按钮或通过代码触发展开行时,expand 事件将被触发。
<template> | |
<el-table | |
:data="tableData" | |
:expand-row-keys="expandRowKeys" | |
@expand="handleExpand" | |
> | |
<el-table-column type="expand"> | |
<template slot-scope="props"> | |
<el-form label-position="left" inline class="demo-table-expand"> | |
<el-form-item label="商品名称"> | |
<span>{{ w.name }}</span> | |
</el-form-item> | |
<el-form-item label="商品描述"> | |
<span>{{ w.description }}</span> | |
</el-form-item> | |
</el-form> | |
</template> | |
</el-table-column> | |
<el-table-column label="商品名称" prop="name"></el-table-column> | |
<el-table-column label="商品描述" prop="description"></el-table-column> | |
</el-table> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
tableData: [ | |
{ name: '商品1', description: '描述1' }, | |
{ name: '商品2', description: '描述2' }, | |
{ name: '商品3', description: '描述3' } | |
], | |
expandRowKeys: [0, 1] // 指定需要展开的行的key值,这里以索引为key值 | |
}; | |
}, | |
methods: { | |
handleExpand(row, expandedRows) { | |
console.log(row); // 当前展开的行数据 | |
console.log(expandedRows); // 所有展开的行数据数组 | |
} | |
} | |
}; | |
</script> | |
在上面的示例中,我们使用了 expand-row-keys 属性来指定需要展开的行的 key 值。然后,在 handleExpand 方法中,我们可以获取到当前展开的行数据和所有展开的行数据数组。可以根据实际需求进行相应的处理。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论