elementui中el-table中selection框选中的回显(带有expand的table)
在Element UI的el-table
组件中,如果你想要在表格中展示已经被选中的行(即回显选择),你可以使用selection
属性来绑定一个数组,该数组将会包含所有被选中的行数据。
如果你的表格使用了type="expand"
功能,你需要确保你绑定到selection
属性的数组也包含了那些可以展开的数据行。
以下是一个简单的例子,展示了如何在el-table
中实现选择行的回显,以及如何处理带有展开行的表格:
<template>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
row-key="id"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<!-- 这里可以放置展开后的详细内容 -->
<p>{{ props.row.description }}</p>
</template>
</el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// 初始数据,应该包含每行的唯一标识,例如 'id'
],
selectedRows: []
};
},
methods: {
handleSelectionChange(val) {
this.selectedRows = val;
}
}
};
</script>
在这个例子中,handleSelectionChange
方法用于更新选中的行列表。row-key
属性用于指定每行唯一的标识,这是必要的,因为Element UI的el-table
使用这个属性来跟踪行的状态。
当你选择或反选行时,selection-change
事件会触发,并且你可以通过handleSelectionChange
方法更新你的selectedRows
数组,它将包含当前所有选中的行数据。
如果你需要在页面加载时预先选中一些行,你可以在mounted
钩子中设置this.selectedRows
。
请注意,这个例子假设每个数据行都有一个唯一的id
字段。根据你的数据结构,你可能需要将row-key
属性设置为其他字段。
评论已关闭