基于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()不光能修改数据，还能添加数据
例如：

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

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

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

数据初始化：

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(','))
          }   
        }