2021-07-22

页面需求点击不同的类型 显示不同的组件,正确的选项 在from中的option,istrue选项为1
1:点击单选 是单选按钮 +input框
2:点击多选切换成多选框
属性介绍:

• radioList: ‘’, v-mode绑定的单选框
• checkboxList: [], v-mode绑定的多选框
• option.isRight=1时为选中状态
• option.isRight=0时时未选中状态

  <el-form-item label="选项 :" v-show="form.questionType !== '3'">
          <div class="option_item">
            <!-- 单选状态 -->
            <template v-if="form.questionType === '1'">
              <!-- 单选框  v-model="radioList" -->
              <el-radio-group v-model="radioList">
                <div v-for="(item, index) in form.options" :key="index">
                  <el-radio :label="item.code" style="margin: 0px 3px">
                    {{ item.code }}
                  </el-radio>
                  <!-- 输入框 -->
                  <el-input
                    class="elinput"
                    v-model="item.title"
                    style="width: 240px"
                  ></el-input>
                  <!-- 上传图片 -->
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-circle-close"></i>
                    <span class="avatar-uploader-icon">上传图片</span>
                  </el-upload>
                </div>
              </el-radio-group>
            </template>

            <!-- 多选状态 -->
            <template v-else>
              <el-checkbox-group v-model="checkboxList">
                <div v-for="(item, index) in form.options" :key="index">
                  <el-checkbox :label="item.code" style="margin: 0px 3px"  :checked="item.isRight == 1"
                    >{{ item.code }}
                  </el-checkbox>
                  <!-- 输入框 -->
                  <el-input
                    class="elinput"
                    v-model="item.title"
                    style="width: 240px"
                  ></el-input>
                  <!-- 上传图片 -->
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-circle-close"></i>
                    <span class="avatar-uploader-icon">上传图片</span>
                  </el-upload>
                </div>
              </el-checkbox-group>
            </template>
          </div>

          <el-button type="danger" @click="Addbtn" :disabled="form.questionType ==='1'?true:false">增加选项与答案</el-button>
        </el-form-item>

script部分

export default{
 data () {
    return {
    radioList: '', 单选框
    checkboxList: [], 多选框
 		form:{
 		选项数组
 		options: [{ code: 'A', title: '', img: '', isRight: 0},
    { code: 'B', title: '', img: '', isRight: 0 },
    { code: 'C', title: '', img: '', isRight: 0 },
    { code: 'D', title: '', img: '', isRight: 0}],

}
methods:{
点击提交按钮
    onSubmit () {
      //   试题标签转换
      if (this.form.tags) {
        this.form.tags = '无数据'
        // console.log('无数据', this.form.tags)
      } else {
        this.form.tags = this.form.tags.join(',')
        // console.log()
      }
      //   console.log(this.form.tags)
      // 单选和双选
      if (this.form.questionType === '1') {
        this.form.options = this.form.options.map((item) => {
          if (this.radioList === item.code) {
            return { ...item, isRight: 1 }
          } else {
            return { ...item, isRight: 0 }
          }
        })
        // console.log(listres)
      } else {
        this.form.options = this.form.options.map((item) => {
          if (this.checkboxList.includes(item.code)) {
            return {
              ...item,
              isRight: 1
            }
          } else {
            return {
              ...item,
              isRight: 0
            }
          }
        })
      }}

}}}

利用监听属性,监听选择的值,赋值给form.isRight

  export default{

  watch: {
    'form.provinces': {
      handler: function (v) {
        this.citysList = citys(v)
      }
    }
    监听单选
    radioList: {
      handler: function (v) {
        this.form.options.filter(item => {
          if (item.code === v) {
            item.isRight = 1
          }
        })
      }
    },
    // 监听多选
    checkboxList: {
      deep: true,
      handler: function (v) {
        console.log('Object.values', Object.keys(v))
        this.form.options.map(item => {
          if (v.includes(item.code)) {
            item.isRight = 1
          }
        })
      }
    }
    }

利用计算属性,监听选择的值,赋值给form.isRight
选择框的v-mode设置radioListoneone属性

            <template v-if="form.questionType === '1'">
              <!-- 单选框  v-model="radioList" -->
              <el-radio-group v-model="radioListoneone">
                <div v-for="(item, index) in form.options" :key="index">
                  <el-radio :label="item.code" style="margin: 0px 3px">
                    {{ item.code }}
                  </el-radio>
                  <!-- 输入框 -->
                  <el-input
                    class="elinput"
                    v-model="item.title"
                    style="width: 240px"
                  ></el-input>
                </div>
              </el-radio-group>
            </template>
  export default{
computed: {
监听v-mode的值
    radioListoneone: {
      get: function () {
        console.log(this.codeone)
        return this.codeone
      },
      set: function (n) {
        console.log('选择的答案', n)
        this.form.options.filter(item => {
          item.isRight = 0
          if (item.code === n) {
            console.log(item)
            // item.code = n
            item.isRight = 1
            console.log(item)
          }
        })
        this.codeone = n
      }
    }
}