使用el-table多选表格,并且有数据回显,附上完整代码
时间: 2023-11-11 21:15:37 浏览: 162
获取el-table表格中选中行的数据
以下是一个使用 Element UI 的 el-table 多选表格,并且支持数据回显的完整代码示例:
```html
<template>
<div>
<el-table
:data="tableData"
:row-key="row => row.id"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
</el-table>
<el-button @click="handleSelectionChange">保存</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
name: '张三',
age: 18,
selected: false
},
{
id: 2,
name: '李四',
age: 22,
selected: false
},
{
id: 3,
name: '王五',
age: 25,
selected: false
}
]
}
},
methods: {
handleSelectionChange(selection) {
this.tableData.forEach(row => {
if (selection.indexOf(row) >= 0) {
row.selected = true
} else {
row.selected = false
}
})
console.log('选中的行:', selection)
console.log('选中的数据:', this.tableData.filter(row => row.selected))
}
}
}
</script>
```
在这个示例中,我们使用了 Element UI 的 el-table 组件来实现多选表格的功能。通过设置 `type="selection"`,我们可以让 el-table-column 组件变成一个多选框列。同时,我们使用 `selection` 属性来绑定选中的行,这样就可以获取到用户选择的数据了。
为了支持数据回显,我们在表格数据中添加了一个 `selected` 字段来标记行是否被选中。在 `handleSelectionChange` 方法中,我们遍历选中的行,更新它们在表格数据中对应的 `selected` 字段。这样就可以实现选中数据的回显了。同时,我们也输出了选中的行和数据,方便开发者进行后续的处理。
阅读全文