el-checkbox 遍历循环赋值 defId : 19 faultId : 20 name : "运维人员漏配定时任务" remarks : null type : 2
时间: 2024-04-12 10:31:30 浏览: 192
如果你有如下的数据对象:
```javascript
data() {
return {
checkboxList: [
{ defId: 19, name: '运维人员漏配定时任务', type: 2 },
{ defId: 20, name: '其他任务', type: 1 },
// 其他数据项...
],
selectedItems: [] // 存储选中的项
};
}
```
你可以使用`v-for`指令来遍历`checkboxList`数组,并将数据绑定到`el-checkbox`组件上。在这个例子中,我们将`defId`作为`el-checkbox`的value,并将`name`作为显示文本。
```html
<template>
<div>
<el-checkbox v-for="item in checkboxList" :key="item.defId" v-model="selectedItems" :label="item.defId">{{ item.name }}</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checkboxList: [
{ defId: 19, name: '运维人员漏配定时任务', type: 2 },
{ defId: 20, name: '其他任务', type: 1 },
// 其他数据项...
],
selectedItems: [] // 存储选中的项
};
}
};
</script>
```
在上述代码中,我们使用`v-model`指令将选中的项绑定到`selectedItems`数组上。你可以在其他地方使用`selectedItems`数组来获取用户选择的值。
阅读全文