动态添加input输入框

381 阅读1分钟

image.png

          <el-row :class="xzxxtitleclass">
          <el-col :span="24">
            <el-button
              type="primary"
              size="mini"
              @click="newSelect"
              :class="xzxxclass"
              >新增选项</el-button
            >
            <span style="font-size: 24px"> 选项内容 </span>
          </el-col>
        </el-row>
          <el-row class="stxxinlinebox" v-for="a in answerList" :key="a.xuhao">
      <el-col class="stxxinline" :span="2"> 选项 </el-col>
      <el-col class="stxxinline" :span="4">
        <el-input :name="'xuhao_' + a.index" v-model="a.xuhao" />
      </el-col>
      <el-col class="stxxinline stxxxxnr" :span="10">
        <el-input
          :name="'answercontent_' + a.index"
          v-model="a.content"
          type="text"
          placeholder="请输入选项内容"
        />
      </el-col>
      <el-col class="stxxinline" :span="2">
        <el-upload
          v-show="a.isShowUpload"
          class="avatar-uploader"
          :action="uploadAttUrlStr(a.index)"
          name="file"
          :headers="headers"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          accept=".jpg,.jpeg,.png,.gif,rar,zip,doc,docx,xls,xlsx"
        >
          <el-button size="small" style="float: left; margin-left: 10px"
            >上传
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-upload>
      </el-col>
      <el-col class="stxxinline" :span="4">
        正确答案:
        <el-checkbox :name="'istrue_' + a.index" v-model="a.istrue" />
      </el-col>
      <el-col class="stxxinline" :span="2">
        <el-button
          size="mini"
          type="text"
          style="text-align: center"
          @click="delAns(a.index)"
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-row class="stjxbox">
      <el-col :span="24">
        <el-form-item label="试题解析" prop="questionanalysis">
          <el-input
            v-model="form.questionanalysis"
            type="textarea"
            placeholder="请输入试题解析"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  
  
            newSelect() {
              //判断是普通题还是图片题
              let questionclass = this.form.questionclassify;
              let length = this.answerList.length;
              if (length == this.xuhaoTemp.length) {
                alert("选项数量已达上限!");
                return;
              }
              let obj = {};
              if (questionclass == 1) {
                obj = {
                  index: length,
                  xuhao: this.xuhaoTemp[length],
                  content: "",
                  istrue: false,
                  isShowUpload: false,
                };
              }
              if (questionclass == 2) {
                obj = {
                  index: length,
                  xuhao: this.xuhaoTemp[length],
                  content: "",
                  istrue: false,
                  isShowUpload: true,
                };
              }
              this.answerList.push(obj);
            },
            
            //expot 中的data数据
          rules: {},
          answerList: [
            {
              index: 0,
              xuhao: "A",
              content: "内容",
              picUrl: "",
              istrue: false,
              isShowUpload: false,
            },
          ],
          xuhaoTemp: ["A", "B", "C", "D", "E", "F", "G"],  
          
          
            /** 判断有没有选答案,或者单选时多选 */
            istrueJudgment(val) {
              let answerListlength = val.length;
              let trueNum = 0;

              for (let i = 0; i < answerListlength; i++) {
                if (val[i].istrue) {
                  trueNum = trueNum + 1;
                }
              }
              //istrue的true为0,忘记勾选正确答案
              if (trueNum == 0) {
                this.msgError("请勾选正确答案");
                return false;
              }
              //如果是单选题,则istrue的true不能超过一个
              if (this.form.questiontype == 1 && trueNum > 1) {
                this.msgError("单选题只能有一个正确选项");
                return false;
              }
              return true;
            },