elementUI中表格多选框的记录--v2
在Element UI中使用表格组件时,可以通过selection-change
事件来监听多选框的变化。以下是一个简单的例子,展示了如何获取用户选中的记录。
<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</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>
</template>
<script>
export default {
data() {
return {
tableData: [{ date: '2016-05-02', name: '王小虎', ... }, ...], // 表格数据
multipleSelection: [] // 存储选中的记录
};
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val; // 当选中项发生变化时,将最新的选中项赋值给multipleSelection
}
}
};
</script>
在这个例子中,handleSelectionChange
方法会在用户选择或取消选择任何行时被调用,并接收到当前选中的所有行。然后,你可以将这些行的数据存储在multipleSelection
数组中,以便在其他地方使用。
评论已关闭