<template>
<div id="checkbox">
//@change checkbox 操作事件
<el-checkbox-group v-model="boxchecked" @change="handleRoleCheckedChange">
// :label 选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效)
<el-checkbox v-for="chechbox in checkboxlist" :label="chechbox.id" :key="chechbox.id">
// {{role.description}} checkbox 显示内容
{{chechbox.title}}
</el-checkbox>
</div>
</template>
</el-checkbox-group>
<script>
import {get} from '../../../config/http.js'
export default {
name: 'checkbox',
data () {
return {
//checkbox 数据集
checkboxlist: '',
//checkbox 默认选中项
boxchecked: [],
}
},
created: function () {
this.getcheckboxs()
},
methods:{
//获取chechbox 数据集
getcheckboxs(){
this.checkbox_roles= await get('manage/role/list_all')
},
handleRoleCheckedChange(value){
//checkbox 选中时 会把 :label 选中状态的值 放入数组中
//获取所选 :label 值
for (var i = 0; i <= value.length; i++) {
console.log('选中:label值' + value)
}
//获取选中总数
console.log(value.length)
}
}
}
</script>
Element UI el-checkbox 选中 取消 取值(详解)
最新推荐文章于 2024-05-21 21:57:08 发布