多选转化bug

src/views/train/questionManage/edit.vue

@@ -50,8 +50,40 @@
           </el-form-item>
         </el-col>
         <el-col :span="24">
-          <el-form-item label="答案" ref="ans" prop="ans">
-            <el-input :readonly="readonly" v-model="form.ans"></el-input>
+          <el-form-item  v-show="this.form.type" label="答案" ref="ans" prop="ans">
+           <!-- <el-input :readonly="readonly" v-model="form.ans"></el-input> -->
+           <!-- 填空题-->
+           <el-input  v-show="this.form.type=='F'" type="textarea" :readonly="readonly" v-model="form.ans"></el-input>
+           <!-- 单选题-->
+             <el-select style="width: 100%;" v-show="this.form.type=='S'" v-model="form.ans" placeholder="请选择">
+               <el-option
+                 v-for="item in soptions"
+                 :key="item.value"
+                 :label="item.label"
+                 :value="item.value">
+               </el-option>
+             </el-select>
+           <!-- 判断题-->
+           <el-select style="width: 100%;" v-show="this.form.type=='J'" v-model="form.ans" placeholder="请选择">
+             <el-option
+               v-for="item in joptions"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+           <!-- 多选题-->
+             <TransSelect v-if="this.form.type=='M'" v-model="form.ans" />
+        <!--  <el-select style="width: 100%;"   multiple v-model="form.ans" placeholder="请选择">
+            <el-option
+               v-for="item in moptions"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+
+           </el-select> -->
+
           </el-form-item>
         </el-col>
       </el-row>
@@ -71,6 +103,7 @@
   </RelDialog>
 </template>
 <script>
+  import TransSelect from './transSelect.vue'
   import {
     editMixin
   } from 'common'
@@ -78,14 +111,44 @@
     mixins: [editMixin],
     /* 存放index页面传递的额外参数*/
     mounted() {
-
+    /* form.ans拦截*/
     },
     /* 组件名称*/
     name: "pxglPxstEdit",
     /* 传递props模式一样必填，用于index,button,REdialog之间的组件通信*/
-
+    computed:{
+      typess(){
+        return this.form.type
+      }
+    },
+    watch:{
+      typess(){
+        if(this.type=='add'){
+           this.form.ans=''
+        }
+      }
+    },
     data() {
       return {
+        // moptions:[
+        //   {value:'A',label:'A'},
+        //   {value:'B',label:'B'},
+        //   {value:'C',label:'C'},
+        //   {value:'D',label:'D'},
+        //   {value:'E',label:'E'},
+        //   {value:'F',label:'F'}
+        // ],
+        mtrans:'',
+        soptions:[
+          {value:'A',label:'A'},
+          {value:'B',label:'B'},
+          {value:'C',label:'C'},
+          {value:'D',label:'D'}
+        ],
+        joptions:[
+          {value:'A',label:'正确'},
+          {value:'B',label:'错误'},
+        ],
 
         /* 额外初始化，根据需求*/
         systemType: [],
@@ -133,11 +196,15 @@
             required: true
           }, ],
           ans: [{
-            required: true
+            required: true,
+            message: '请填写答案'
           }, ]
         }
       }
     },
+    components:{
+      TransSelect
+    },
     methods: {
 
     }

src/views/train/questionManage/transSelect.vue

+<template>
+  <el-select @change='change' style="width: 100%;" v-model="newValue" multiple placeholder="请选择">
+    <el-option
+      v-for="item in moptions"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    props:['value'],
+    watch:{
+      'value':{
+                handler: function (val) {
+                if(val){
+                   this.newValue=val.split(',')
+                }
+               
+                },
+                deep:true,
+                // 立即以obj.name的当前值触发回调
+                immediate: true
+              },
+      // value(val){
+      //   console.log(val,'val改变')
+      //   if(val){
+      //    if(typeof val!='object')
+      //      this.newValue=val.split(',')
+      //   }
+
+      // }
+    },
+    data(){
+      return{
+        newValue:'',
+        moptions:[
+          {value:'A',label:'A'},
+          {value:'B',label:'B'},
+          {value:'C',label:'C'},
+          {value:'D',label:'D'},
+          {value:'E',label:'E'},
+          {value:'F',label:'F'}
+        ],
+      }
+    },
+    methods:{
+      change(val){
+        console.log(this.value)
+         let value= val.sort((s1, s2)=>{
+            let a1 = s1.toUpperCase();
+                                let a2 = s2.toUpperCase();
+                                if (a1 < a2) {
+                                    return -1;
+                                }
+                                if (a1 > a2) {
+                                    return 1;
+                                }
+                                return 0;
+
+          }).join(',')
+         this.$emit('input',value)
+      }
+    }
+  }
+</script>
+
+<style>
+</style>