使用 Vue 和 Element 实现多选框组及保存选择 ID 的示例代码
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本示例展示如何运用Vue框架结合Element UI组件库创建具有保存选择ID功能的多选框组，适用于需要处理复杂选项选择场景的应用开发。
使用 Vue 和 Element 实现列表复选框，并保存已选择的 ID 集合：
1. 引入 Element 的多选框组组件。
2. `checkList` 用于提交后台的数据，而 `tableData` 是数据源。
3. 初始化 `tableData` 数据集合。
4. 循环遍历需要显示的内容。
5. 在多选框组上添加 change 事件以处理选择变化。
例如：
```javascript
data() {
return {
tableData: [
{ date: 2016-05-02, name: 王小虎, address: 上海市普陀区金沙江路 1518 弄 },
{ date: 2016-05-04, name: 王小虎, address: 上海市普陀区金沙江路 1517 弄 }
],
checkList: []
};
},
methods: {
handleSelectionChange(selection) {
this.checkList = selection.map(item => item.id);
},
}
```
在模板中使用：
```html
{{ item.name }} ({{ item.date }})
全部评论 (0)
还没有任何评论哟~
