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了

发布了4 篇原创文章 · 获赞 1 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览