基于Vuejs+ElementUI的答案录入功能的一些总结

答案管理模态框UI展现

选择题

填空题

主要完成的功能是：
支持按两种答案类型：选择、填空，录入答案
全局的操做有：添加和删除

**插播一个具体学科下有具体属性代码解决办法：
在vuex里面的getter.js中，设置获取不一样属性的函数**

nonXXXAttr: (state) => {
  return ...
}

而后在所需的组件中调用，具体实现：

computed: {
  ...mapGetters([
    xxxAttr
    ...
  ]),
  attr() {
    //根据不一样的属性,返回不一样的值

答案录入模态框主要是使用elementUI的table组件、tag组件、input框组件、button组件来实现的，利用axios与后台接口进行数据传送。

//经过import模式引入
import { mapGetters } from 'vuex'
import axios from 'axios'

经过watch监听实现id转换后自动执行axios请求

watch: {
  isShow () {
    if (this.isShow) { 
      this.initData()
    }
   }
}

按钮的加载随着函数的执行进行不一样的状态转换：

// 首先在el-button里设置:loading="isLoading",而后再data的return里设置
isLoading:false,当执行保存按钮函数时，this.isLoading = true,而后在每一个弹出框执行的时候，要记住设置this.isLoading = false,不然按钮将一直执行加载状态直到保存答案成功。

拼接数据

for(let i = 0; i < len; i++) {
  data.push({
    ...
    //后台wiki接口文档所对应的各个字段
    type:,
    order_num:'',
    content:,
    is_right:
   })
}

这里强调一下，由于个人content值是双数组的形式，然后台所需的是Json格式，因此须要进行处理，解决办法以下：

content: spaceContentTags[i].join(',')

具体的axios请求方法：

this.$axios.post('接口地址', {
  options: JSON.stringfy(data),
  pageId:this.id
}, {
   methodType: 1
}).then((res) => {
   this.$success()
   this.$cancelAnswer()
}).finally(() => {
   this.isLoading = false
})
}

而后验证部分特别注意的是选择题内容的验证：

validateSelect (index) {
     if (this.answerInput[index] === undefined || this.answerInput[index] == '' || this.answerInput[index].length > 200) {
        this.$message({
          message: '请输入1-200字符内容',
          type: 'warning'
        })
      }
    }

为undeined、为''、以及长度大于200三个条件缺一不可

使用this.$set(this.inputVisible,index,false)
其中在进行数据赋值的过程当中，遇到了一种状况，当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新视图上去。
缘由是：vue的响应系统，把一个普通的javascript对象传给vue实例来做为它的data选项,vue将遍历它的属性，用object.defineProperty将它们转为getter/setter
解决方法是：（1）经过Vue.set方法设置data属性
（2）使用vm.$set实例方法
this.$set()和Vue.set()本质方法同样，前者能够用在methods中使用
使用set添加数据
Vue.set()不光能修改数据，还能添加数据
例如：

<section v-for="item in list">
   <div :class="['xxclass',item.checked?'checked':'']"></div>
</section>

这里经过判断item的自己不存在的checked属性来决定是否增长checked样式类，利用了set使用了对象中自己不存在的cehcked属性来实现想要的功能。

答案录入功能模态框主要基于对选择题和填空题的答案录入，使用el-select来实现,answerType的值为1和2，分别对应选择题和填空题。

<el-select v-model="answerValue" placeholder="" @change="showToggle">
   <el-option v-for="item in answerType" :key="item.type :label="item.label" :value="item.value"></el-option>

填空题部分使用elementui tag组件：

<el-table
        :data="spaceTableData"
        v-show="spaceVisible"
        style="width: 100%">
        <el-table-column
          label="序号"
          width="100"
          align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.order_num}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="内容"
          align="center">
          <template slot-scope="scope">
            <el-tag
              v-for="tag in spaceContentTags[scope.$index]"
              closable
              :disable-transitions="true"
              @close="handleClose(scope.$index, tag)">
              {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible[scope.$index]"
              v-model="inputValues[scope.$index]"
              :ref="'saveTagInput' + scope.$index"
              size="small"
              @keyup.enter.native="$event.target.blur"
              @blur="handleInputConfirm(scope.$index)">
            </el-input>  
          </template>
        </el-table-column>
         <el-table-column 
          label="操做"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-plus"
              class="button-new-tag space-button" 
              size="small"
              @click="showAddInput(scope.$index)">
            </el-button>
            <el-button
              class="space-button"
              icon="el-icon-close"
              size="mini"
              @click="spaceHandleDelete(scope.$index, scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>

数据初始化：

for (let i = 0, len = data.length; i < len; i++) {
          if (data[i].type == 1) {
              // 初始化选择题
            _this.selectTableData.push({
              order_num: data[i].order_num
            })
            _this.answerInput.push(data[i].content)
            if (data[i].is_right == '1') {
              _this.radio = data[i].order_num
            }
          } else {
            // 填空题初始化
            _this.spaceTableData.push({
              order_num: data[i].order_num
            })
            _this.spaceContentTags.push(data[i].content.split(','))
          }   
        }