element ui中多选表单,点击单元格选择这一行,并且可以多选
时间: 2023-05-18 16:03:28 浏览: 308
可以通过设置表格的selection-change事件来实现这个功能。在事件处理程序中,可以获取到当前选中的行和列,然后根据需要进行处理。以下是一个示例代码:
<template>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' },
{ name: '赵六', age: 24, address: '深圳市' }
]
}
},
methods: {
handleSelectionChange(selection) {
console.log(selection)
}
}
}
</script>
在上面的代码中,我们通过设置el-table的selection-change事件来处理选择变化。在事件处理程序中,我们可以获取到当前选中的行和列,然后根据需要进行处理。在这个例子中,我们只是简单地将选中的行打印到控制台上。
阅读全文