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