js 创建问卷功能

中心功能点：

1.根据选择不同，添加单选题、多选题、填空等问题形式

2.每道题可以自由增删选项，设置是否必填

实现方式：

1.增加大题方法：

//根据类型不同，返回不同的结构
typeOption (type) {
    let selectItem = []
    switch (type) {
        case 1 :  //单选结构
            selectItem = [
                {val: 'val1',text: "单选1"},
                {val: 'val2',text: "单选2"},
                {val: 'val3',text: "单选3"}
            ];
            break;
        case 2 :  //多选结构
            selectItem = [
                {val: false, text: "多选1"},
                {val: false, text: "多选2"},
                {val: false, text: "多选3"},
            ];
            break;
        case 3 :  //下拉框结构
            selectItem = [
                {val: false, text: "下拉框1"},
                {val: false, text: "下拉框2"},
                {val: false, text: "下拉框3"},
            ];
            break;
        case 4 :  //填空题结构
            selectItem = [
                {val: ""}
            ];
            break;
    }

    return selectItem
},

// 添加，调用时输入约定好的type值（本例子是1单选2多选3下拉4填空）
addQuestion(type) {
    
    const quesStructure = { //这个结构是和后端约定好的，灵活改变
        isRequired: true,  //是否必选
        name: "",
        question: type === 1 ? '单选标题' : type === 2 ? '多选标题' : type === 3 ? '下拉框标题' : '填空标题' ,
        type: type,
        selectItem: this.typeOption(type), //这一步拆分成了上面的函数，不想这样弄也可以直接在这里判断
        value: "",
        show: false
    }
    this.form.items.push(quesStructure) // this.form.items是本例中问卷问题绑定的值

},

2.页面中渲染问卷题目

下面展示了单选、多选 两种 type 

一开始多选我是没有绑定 v-model 的，后面发现页面会报错，就加上了

<div v-for="(itemList, indexList) in form.items" :key="indexList">
   //下面根据 itemList.type 的值判断如何展示

    <el-radio-group  v-if="itemList.type === 1"> //1为单选
        <el-radio  v-for="selectItem in itemList.selectItem" :label="selectItem.text" :key="selectItem.text + indexList" >{{selectItem.text}}</el-radio>
    </el-radio-group >

    <el-checkbox-group v-model="itemList.value"  v-if="itemList.type === 2">
       <el-checkbox  v-for="selectItem in itemList.selectItem" :label="selectItem.text" :key="selectItem.text + indexList" >{{selectItem.text}}</el-checkbox>
    </el-checkbox-group>

</div>

3.每道题中增加删除选项

这边有两种的，有些是可以同时编辑多个选项的，我这边是以展开的方式编辑的，只能一个一个问题编辑，所以我这边增加了一个editItem的变量

这边也可以用 this.form.items[index] 替代

点击图中 +  调用 

addPlus() {
    if ( this.editItem.type === 1) {
        this.editItem.selectItem.push({val:`val${this.editItem.selectItem.length+1}`,text: `单选${this.editItem.selectItem.length+1}`});
    } else if ( this.editItem.type === 2) {
        this.editItem.selectItem.push({val: false, text: `多选${this.editItem.selectItem.length+1}`});
    } else if ( this.editItem.type === 3) {
        this.editItem.selectItem.push({val: false, text: `下拉框${this.editItem.selectItem.length+1}`});
    }
},

点击 - 调用

 remove(item) {
    this.editItem.selectItem.splice(item.$index, 1)
},

可能会碰到的问题

 1.Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"

 这种就是因为多选没有绑定  v-model 导致的，加上就好了

2.在编辑状态中展开隐藏的属性没有生效

原因：show 属性是原来没有的，直接用 = 赋值的话，页面没有更新值所以没有生效

解决方式：

this.$set(item, 'show', false)

The End