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

发表评论