知識點:
- el-autocomplete的使用
- 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了