这里记录下vue前端传值的问题:
1、这里后台传的值是string类型的,传到前端是显示复选框和选择框两种,这里贴上代码
后台数据:
private String vehicletype;//培训车型 下列编码可多选,以英文逗号分隔: A1,A2,A3,B1,B2,C1,C2,C3,C4,C5,D,E,F,M,N,P
private String subject;//培训部分及方式 1:第一部分集中教学; 2:第一部分网络教学; 3:第四部分集中教学; 4:第四部分网络教学; 5:模拟器教学; 6:第二部分普通教学; 7:第二部分智能教学; 8:第三部分普通教学; 9:第三部分智能教学
前台展示:
<el-form-item label="可培训车型">
<el-checkbox-group v-model="vehicletype2">
<el-checkbox v-for="veh in checked" :label="veh" :key="veh">{{veh}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="培训部分及方式" >
<el-checkbox-group v-model="subject2">
<el-checkbox v-for="data in items" :label="data.id" :key="data.menu">{{data.menu}}</el-checkbox>
</el-checkbox-group>
其中在script中声明可培训车型
<script>
const vehicletypes = ['A1', 'A2', 'A3', 'B1','B2', 'C1', 'C2', 'C3','C4', 'C5', 'D', 'E','F', 'M', 'N', 'P',];
export default {
name: 'App',
data(){
return {
checked: vehicletypes,//这里将数组赋值给checked在前台去遍历
}
subject2: [],
vehicletype2: [],
form: {
vehicletype:'',//培训车型
subject:'',//培训部分及方式
},
methods: {
look(val){//查看
var that = this;
that.$api.post('/jxApi/grade/get.do',that.$qs.stringify({'id':val.id}),response => {
if (response.status >= 200 && response.status < 300) {
that.loading = false;
if(response.data.state == "success"){
var d = response.data.result;
that.subject2 = d.subject.split(",");//转换数据类型
that.vehicletype2 = d.vehicletype.split(",");//转换数据类型
}
},
onSubmit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {//验证通过
var that = this;
that.form.vehicletype = that.vehicletype2.toString();//转换数据类型
that.form.subject = that.subject2.toString();//转换数据类型
that.$api.post('/jxApi/grade/edit.do',that.$qs.stringify(this.form),response => {
if (response.status >= 200 && response.status < 300) {
if(response.data.state == "success"){
this.$message({
message: response.data.result,
type: 'success'
});
that.searchPage(that.pageNo);//刷新修改的数据
that.dialogVisible = false;//关闭Dialog
}else{
this.$error(response.data.result);
}
} else {//请求失败,response为失败信息
this.$message.error(response.message);
}
});
} else {//验证未通过
this.$message.error('请正确填写表单!');
return false;
}
})
}
}
</script>
这里其中要说明的是前端展示是用一个声明的数组,因为前后端数据类型不一样(不一样则报400错误,f12是消息头的格式是html-txt),所以要转换数据类型。
所以这里使用.split()方法(前端写入)和把前端数组用toString方法转换成String类型
这里贴上Element-UI前端组件复选框的地址:
http://element-cn.eleme.io/#/zh-CN/component/checkbox
差不多看懂这个就很容易了