Vue element复选框
文章描述：
Vue element框架复选框获取选中的值
<template>
<div>
<div v-for="(item,index) in list" :key="index">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange(item)">
<el-checkbox :label="item.name">{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
<script>
export default {
components:{
},
beforeMount(){
console.log('挂载前',this.list);
},
data(){
return{
list:[
{
id:1,
name:'北京'
},
{
id:2,
name:'上海'
},
{
id:3,
name:'广州'
}
],
arr:[], // 选中id数组
checkedCities:[], // 选中名称数组
}
},
created() {
},
methods:{
handleCheckedCitiesChange(value){
// 选中的城市name
// console.log(value.name)
console.log(value.id)
// 把城市id存入arr
if(this.arr.indexOf(value.id) === -1){
this.arr.push(value.id)
}else{
this.arr.splice(this.arr.indexOf(value.id),1)
}
console.log(this.arr)
console.log('打印数组',this.checkedCities);
}
}
}
</script>
<style>
</style>
发布时间：2023/06/01
发表评论