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了