element中input遠程搜索以及動態表單驗證

知識點：

1.  el-autocomplete的使用
2. form-動態增減表單項的寫法以及驗證

先看效果圖吧，就是一個遠程搜索加一個動態表單的驗證，直接看代碼吧

遠程搜索的下面的代碼已經說的很清楚了，這裏需要重點說明一下的是表單驗證需要注意的幾項

• el-form中的:model如果等於info，下面的el-form-item中v-for的就是info對象下面的值（是一個數組）
• :prop是數組下面的值（最後解析出來就是articles.0.name、articles.1.name這樣的）
• :rules就是具體的需要驗證的

//html
<el-form ref="form" :model="info" label-width="120px">
   <el-form-item v-for="(item,index) in info.articles" :key="index" :label="index === 0? '素材名稱': ''" :prop="'articles.' + index + '.name'" :rules="{ required: true, message: '請輸入素材名稱', trigger: ['change','blur'] }">
     <div class="flex-item">
        <el-autocomplete v-model="item.name" :fetch-suggestions="querySearchAsync" placeholder="請輸入素材名稱" @select="handleSelect" class="w450"></el-autocomplete>
        <span class="c_btn plus" @click="addName(index)" v-if="index === info.articles.length-1"><i class="el-icon-plus"></i></span>
        <span class="c_btn minus" @click="removeName(index)" v-if="index !== 0 || info.articles.length > 1"><i class="el-icon-minus"></i></span>
      </div>
    </el-form-item>
</el-form>

//script
<script>
export default {
  data () {
    return {
      info: {
        articles: [{
          name: ''
        }]
      }
    }
  },
  methods: {
    //遠程搜索
    querySearchAsync (value, cb) {
      //這裏是需要上傳給後端的參數
      const params = {
        name: value,
        pageNum: 1,
        pageSize: 20,
      }
      this.$api.PostList('請求的接口名', params).then(data => {
        if (data.list.length === 0) {
          this.$message.error('沒有找到關聯素材，請添加素材後重試。')
          cb()
          return
        }else {
          cb(data.list)
        }
      }, res => {
        this.$message.error(res.message)
      })
    },
    //選擇後需要做的處理（這裏是做了不能重複選擇的處理），item是你當前選中的那一項
    handleSelect (item) {
      if (item) {
        let len = this.info.articles.length
        this.info.articles.map(row => {
          if (!row.id || row.id !== item.id) {
            row.id = item.id
          } else {
            if (row.id && row.id === item.id) {
              this.$message.error('請勿重複選擇')
              this.info.articles[len - 1].name = ''
              this.info.articles[len - 1].id = ''
            } else {
              const name = row.name.split('> ')[1]
              if (name === item.name) {
                row.id = item.id
              }
            }
          }
        })
      }
    },
    //添加input框
    addName (index) {
      this.info.articles.push({
        name: '',
        key: Date.now()
      })
    },
    //刪除input框
    removeName (index) {
      this.info.articles.splice(index, 1)
    },
    
  }
}
</script>

這樣就ok了