elementUI 的多选框的选中

最新推荐文章于 2024-08-09 08:00:00 发布

Ideaing~

最新推荐文章于 2024-08-09 08:00:00 发布

阅读量2.3k

点赞数

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/L_csdn123/article/details/122431540

版权

要用elementUI组件写个多选框，要求要有之前的默认选中，展示的是中文名字，实际传值的时候传的是英文的名字

	<el-checkbox-group
		v-model="form.scopes" 		
		@change="handleCheckChange"
	>
        <el-checkbox 
        	  v-for="(item,index) in scopes" 		// 展示在页面上多选框内容的数组可以是普通数组可以是对象数组这个无所谓
        	  :key="index" 
        	  :label="item.nameEN" 		// label绑定的值是要传的值
         > 
              {{item.nameCN}}			//  这个是展示在页面上的值
          </el-checkbox>
   </el-checkbox-group>

注意：
1. el-checkbox-group上绑定的值就是默认选中的值，这个值有个要求他必须是普通的数组，不能是对象数组那种。
2. 他其实是把传的label值放到一个普通数组里，所以他必须和label的值的形式统一，要不然默认选中不会生效的！！！
3. el-checkbox-group和el-checkbox 展示的scopes并不是一个，group上展示的form.scopes是表单中的一个scopes属性，他取选中的label的值的数组集合，而checkbox取的是自己处理后的想展示内容在checkbox上的数组