添加按题填写多选数据渲染

src/components/batchSelectQuestionBatchFill/BatchSelectQuestionBatchFill.vue

@@ -34,6 +34,16 @@ interface TitleMsg {
     questionType:number
 }
 
+interface TableColumn {
+    name:string,
+    label:string,
+    width:string,
+    fixed:string,
+    align:string,
+    minWdth:string,
+    custom:boolean,
+}
+
 const props = defineProps({
     titleMsg:{
         type:Object as () => TitleMsg,
@@ -46,42 +56,28 @@ const props = defineProps({
     allowEdit:{
         type:Boolean,
         required:true
+    },
+    customTableColumns:{
+        type:Array<TableColumn>,
+        default:()=>[]
+    },
+    defaultTableData:{
+        type:Array,
+        default:()=>[]
     }
 })
 
 const emit = defineEmits(['questionAnswerChange'])
 const isFinishEdit = defineModel('isFinishEdit')  //是否已经编辑完成，
 
-// 模拟数据
-const tableData = ref([
-    {
-        teacher:'班主任',
-        a:false,
-        b:false,
-        c:false,
-        d:false,
-    },
-    {
-        teacher:'班主任',
-        a:false,
-        b:false,
-        c:false,
-        d:false,
-    },
-    {
-        teacher:'班主任',
-        a:false,
-        b:false,
-        c:false,
-        d:false,
-    },
-    {
-        teacher:'班主任',
-        a:false,
-        b:false,
-        c:false,
-        d:false,
-    },
+const tableData = ref<any[]>([
+    // {
+    //     teacher:'班主任',
+    //     a:false,
+    //     b:false,
+    //     c:false,
+    //     d:false,
+    // },
 ])
 
 
@@ -92,7 +88,7 @@ const HandleCheck = (row,key,val)=>{
 }
 
 watch(()=>tableData.value,(newVal)=>{
-    console.log('当前表格数据变化了')
+    console.log('当前表格数据变化了',newVal)
     let isFinish = true
     newVal.map(row=>{
         // 选项没有被勾选
@@ -107,7 +103,26 @@ watch(()=>tableData.value,(newVal)=>{
     // 当前问卷没有全部填写完成
         isFinishEdit.value = false
     }
-},{deep:true})
+},{deep:true,immediate:true})
+
+watch(()=>props.defaultTableData,(newVal)=>{
+    console.log('传递的表数据变化了---',newVal)
+    tableData.value = newVal
+},{immediate:true,deep:true})
+
+watch(()=>props.customTableColumns,(newVal)=>{
+    tableColumns.value = [
+        {
+            name:'teacher',
+            label:'',
+            width:'100',
+            fixed:'',
+            align:'center',
+            minWdth:'',
+        },
+        ...newVal
+    ]
+},{immediate:true})
 
 </script>
 

src/components/batchSelectQuestionBatchFill/table.ts

@@ -1,49 +1,34 @@
 import { ref } from "vue"
 
-export const tableColumns = ref([
-    {
-        name:'teacher',
-        label:'',
-        width:'100',
-        fixed:'',
-        align:'center',
-        minWdth:'',
-    },
 
-    {
-        name:'a',
-        label:'A.以身作则，学识渊博，深受学生爱戴',
-        width:'200',
-        fixed:'',
-        align:'left',
-        minWdth:'',
-        custom:true,
-    },
-    {
-        name:'b',
-        label:'B.自我要求严格，敢于管理学生,依法执教',
-        width:'200',
-        fixed:'',
-        align:'left',
-        minWdth:'',
-        custom:true,
-    },
-    {
-        name:'c',
-        label:'C.居高临下，懒于学生管理，处理问题缺乏教育性',
-        width:'200',
-        fixed:'',
-        align:'left',
-        minWdth:'',
-        custom:true,
-    },
-    {
-        name:'d',
-        label:'D.自我要求懒散，教风较差，常讽刺学生',
-        width:'200',
-        fixed:'',
-        align:'left',
-        minWdth:'',
-        custom:true,
-    },
+interface TableColumn {
+    name: string;
+    label: string;  
+    width:string,
+    fixed:string,
+    align:string,
+    minWdth:string,
+    custom?:boolean,
+}
+
+
+export const tableColumns = ref<TableColumn[]>([
+    // {
+    //     name:'teacher',
+    //     label:'',
+    //     width:'100',
+    //     fixed:'',
+    //     align:'center',
+    //     minWdth:'',
+    // },
+
+    // {
+    //     name:'a',
+    //     label:'A.以身作则，学识渊博，深受学生爱戴',
+    //     width:'200',
+    //     fixed:'',
+    //     align:'left',
+    //     minWdth:'',
+    //     custom:true,
+    // },
 ])

src/views/questionnaireCommit/QuestionnaireCommit.vue

@@ -104,6 +104,8 @@
                         :titleMsg="currentEditQuestion" 
                         @questionAnswerChange="HandleQuestionAnswerChange"
                         :allowEdit="!isCurrentQuestionnaireTaskFinish"
+                        :customTableColumns="questionTableColumns"
+                        :defaultTableData="questionTableData"
                     />
 
                     <!-- 评分题 5-->
@@ -753,11 +755,14 @@ watch(()=>currentEditQuestion.value?.questionType,(newVal)=>{
                 // 行循环 
                 // 列循环
 
-                // 20 人答卷
-                // 同一题目 
-                // 每份答卷的同一题
-                        // 不同选项 
-                    // 每个人答案
+
+                // 列循环
+                    // 行循环
+                    
+                // 20 份答卷
+                  // 同一题目 
+                      // 不同选项 
+                      // 每个人的答案
 
 
             // 列循环
@@ -784,16 +789,43 @@ watch(()=>currentEditQuestion.value?.questionType,(newVal)=>{
 
             console.log('准备渲染的表数据___',questionTableData.value)
         }    
-        case 1:{
-            //多选
+        case 1:{    //多选
+            let rowKeys = { }
+            questionTableColumns.value =  currentEditQuestion.value?.options?.map((item,index)=>{
+                rowKeys[item.id] = ''
+                return {
+                    name:item.id,
+                    label:`${getExcelColumn(index)}. `+item.content,
+                    width:'200',
+                    fixed:'',
+                    align:'left',
+                    minWdth:'',
+                    custom:true,
+                }
+            }) || []
+
+            questionTableData.value =  teacherList.value.map(item=>{
+                return {
+                    teacher:item.teacherName,
+                    ...rowKeys  //答案需要循环遍历
+                }
+            })
+            console.log('准备渲染的表数据___',questionTableColumns.value, 'dfdfff',questionTableData.value)
+
             break
         }    
         case 5:{
             //评分题
+
+
+
             break
         }    
-        case 2:{
-            //问答题 
+        case 2:{   //问答题 
+
+
+
+
             break
         }   
     }