在 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>
element表格横向滚动条
</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小时内删除。