Vue-Element前端获得后台数据显示和传值

这里记录下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
差不多看懂这个就很容易了