使用checkboxgroup
组件,实现点击复选,获得value
的数字集合,而不是label
的文字集合。
重要代码如下
注意:
我定义了属性
data-value
作为数据对接时,用于定义的数据格式(便于后台存储,前台读取)。
具体,看每个人的项目需求。
<el-form-item label="福利待遇" :label-width="labelWidth">
<el-checkbox-group v-model="form.welfareTreatment" size="small" class="fldys-text" @change="handleWelfareTreatmentChange">
<el-checkbox name="fulicheckbox" v-for="(item,index) in fldys" :key="index" :label="item.dictLabel" :value="item.dictValue" :data-value="item.dictValue">el-checkbox>
el-checkbox-group>
el-form-item>
response.data.fldys
提示:
script
代码(注意:看下面的代码截图:此时需要获取属性:data-value
)
import $ from jquery;
export default {
name: 'demoVue',
cityOptions,
areaLabel,
data() {
return {
isLoading: false, // 拼命加载中
form: {
welfareTreatment: [], // 福利待遇
}
}
},
methods: {
// 福利待遇
handleWelfareTreatmentChange(value,form,welfareOptions) {
let checkedCount = value.length;
this.form.welfareTreatment = value; // 赋值 (axios传参用)
console.log(value);
// 选中之后,获取value数字
var text = $("input:checkbox[name='fulicheckbox']:checked").map(function(index,elem) {
return $(elem).parents(".el-checkbox").attr("data-value");
}).get().join(',');
console.log("选中的checkbox的值为:"+text);
this.welfareOptions = text; // 记录所有被选中项的下标
},
}
}
console
打印结果,及截图如下:
(注意:看上面的代码截图:此时需要获取属性:data-value)
这样就完成了自定义回传的数据格式。
以上就是关于“ elementUI使用checkboxgroup组件,获得value的数字集合,而不是label的文字集合 - 解决篇” 的全部内容。