Vue+Element一步步實(shí)現(xiàn)動(dòng)態(tài)添加Input_輸入框案例
更新時(shí)間：2022年09月19日 11:27:38 作者：Moo_Trevor
這篇文章主要介紹了Vue+Element一步步實(shí)現(xiàn)動(dòng)態(tài)添加Input_輸入框案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
輸入式動(dòng)態(tài)添加
輸入式：即input的值由用戶輸入；例如：通過(guò)自定義用戶標(biāo)簽，給用戶動(dòng)態(tài)添加多個(gè)標(biāo)簽。
<template>
<div class="app">
<div v-for="item in table" :key="item.id">
<el-input v-model="item.label" class="el-input"></el-input>
</div>
<el-button @click="addInput">添加</el-button>
<el-button @click="search">查看</el-button>
</div>
</template>
<script>
export default {
data () {
return {
table: [
{ id: '12121', label: '' }
]
}
},
methods: {
// 動(dòng)態(tài)添加
addInput () {
this.table.push({ id: Date.now(), label: '' })
},
// 查看
search () {
console.log(this.table)
},
}
}
</script>單選式動(dòng)態(tài)添加
例如：給一名老師動(dòng)態(tài)添加多個(gè)監(jiān)考科目，后臺(tái)接收科目代碼(courseId)。
<div v-for="(item,index) in list" :key="item.id">
<el-select
class="el-select"
v-model="item.courseId"
placeholder="請(qǐng)選擇"
@change="changeSelect($event,index)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
list: [
{ courseId: '', id: '1' }
],
options: [
{ value: '123', label: '英語(yǔ)' },
{ value: '456', label: '數(shù)學(xué)' },
{ value: '868', label: '語(yǔ)文' },
{ value: '672', label: '化學(xué)' },
{ value: '684', label: '物理' }
],
// 動(dòng)態(tài)添加
addInput () {
this.list.push({ id: Date.now(), courseId: '' })
},組合式動(dòng)態(tài)添加
例如：給學(xué)生各個(gè)科目打上分?jǐn)?shù)。
<div v-for="item in list1" :key="item.id">
<el-select
class="el-select"
v-model="item.courseId"
placeholder="請(qǐng)選擇科目"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="item.grade" class="el-input" placeholder="請(qǐng)?zhí)顚?xiě)分?jǐn)?shù)"></el-input>
</div> list1: [
{ courseId: '', id: '1', grade: '' }
],
options: [
{ value: '123', label: '英語(yǔ)' },
{ value: '456', label: '數(shù)學(xué)' },
{ value: '868', label: '語(yǔ)文' },
{ value: '672', label: '化學(xué)' },
{ value: '684', label: '物理' }
],
addInput () {
this.list1.push({ id: Date.now(), courseId: '', grade: '' })
},
// this.list1
// [
// {
// "courseId":"123",
// "id":"1",
// "grade":"96"
// },
// {
// "id":1636423648221,
// "courseId":"456",
// "grade":"100"
// }
// ]組合式動(dòng)態(tài)添加(回傳名稱)
例如：給學(xué)生各個(gè)科目打上分?jǐn)?shù)，后端需要同時(shí)接收科目名稱和科目id。
// 后臺(tái)接收的數(shù)據(jù)
courseList:[
{courseId: '', grade: '', courseName: '' }
{courseId: '', grade: '', courseName: '' }
]這時(shí)候，只需要給el-select添加change事件，在獲取id的同時(shí)獲取到名稱即可。
<div v-for="(item,index) in list2" :key="item.id">
<el-select
class="el-select"
v-model="item.courseId"
placeholder="請(qǐng)選擇科目"
@change="changeOneCourse($event,index)"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="item.grade" class="el-input" placeholder="請(qǐng)?zhí)顚?xiě)分?jǐn)?shù)"></el-input>
</div> changeOneCourse(val, index) {
this.options.find((item) => {
if (item.value === val) {
this.list2[index]['courseName'] = item.label // 根據(jù)綁定值id獲取到名稱label
}
})
}
// this.list2: [
// {
// "courseId":"123",
// "id":"1",
// "grade":"96",
// "courseName":"英語(yǔ)"
// }
// ]單選、多選組合式
例如：給各個(gè)年級(jí)添加不同科目，后端需要同時(shí)接收【科目名稱，科目id】，【年級(jí)id，年級(jí)名稱】。
gradeList:[
{ courseList: [
{ courseId: '', courseName: '' },
{ courseId: '', courseName: '' }
],
gradeData: { grade: '', gradeName: ' ' }
}
]<div v-for="(item,index) in list3" :key="item.id">
<el-select v-model="item.gradeList" placeholder="請(qǐng)選擇年級(jí)" @change="changeGrad($event,index)">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="item.courseList" multiple placeholder="請(qǐng)選擇科目" @change="changeSelect($event,index)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<el-button @click="addInput">添加</el-button>
<el-button @click="search">查看</el-button> list3: [
{ gradeList: '', id: '1', courseList: '' }
],
options: [
{ value: '123', label: '英語(yǔ)' },
{ value: '456', label: '數(shù)學(xué)' },
{ value: '868', label: '語(yǔ)文' },
{ value: '672', label: '化學(xué)' },
{ value: '684', label: '物理' }
],
options1: [
{ value: '1238635', label: '一年級(jí)' },
{ value: '4568635', label: '二年級(jí)' },
{ value: '8688635', label: '三年級(jí)' },
{ value: '6728635', label: '八年級(jí)' },
{ value: '6848635', label: '九年級(jí)' }
],
courseList: [], // 存放多選
grade: [], // 存放單選
name: [],
methods: {
addInput () {
this.list3.push({ id: Date.now(), gradeList: '', courseList: '' })
},
search () {
let arr3 = []
for (let i = 0; i < this.courseList.length; i++) {
arr3.push(Object.assign(this.courseList[i] || {}, this.grade[i] || {})) // 合并數(shù)組對(duì)象
}
console.log(arr3) // 輸出傳給后臺(tái)的結(jié)構(gòu)
},
// 處理多選的值
changeSelect (val, index) {
let courseList = { courseList: [] }
this.name = []
this.courseList[index] = courseList // 初始化第一個(gè)值
// =====================根據(jù)變化的值賦值，有就賦值，無(wú)就刪除===========================
for (let i = 0; i <= val.length - 1; i++) {
this.options.find((item) => {
if (item.value === val[i]) {
this.name.push(item.label) // 根據(jù)綁定值id獲取到名稱label
}
})
}
// =====================進(jìn)行賦值===========================
for (let i = 0; i <= val.length - 1; i++) {
let obj = {}
obj['courseId'] = val[i]
obj['courseName'] = this.name[i]
this.courseList[index]['courseList'].push(obj)
}
console.log(this.courseList) // 相當(dāng)于多選課程的數(shù)據(jù)
},
changeGrad (val, index) {
this.options1.find((item) => {
if (item.value === val) {
this.list2[index]['gradeName'] = item.label // 根據(jù)綁定值id獲取到名稱label
}
})
let grade = { grade: { gradeName: '', gradeId: '' } }
//
let gradeName = ''
this.grade[index] = grade // 初始化第一個(gè)值
this.options1.find((item) => {
if (item.value === val) {
gradeName = item.label // 根據(jù)綁定值id獲取到名稱label
}
})
// =====================進(jìn)行賦值===========================
this.grade[index]['grade']['gradeName'] = gradeName
this.grade[index]['grade']['gradeId'] = val
console.log(this.grade) // 相當(dāng)于單選年級(jí)的數(shù)據(jù)
}
}數(shù)據(jù)回顯
動(dòng)態(tài)添加數(shù)據(jù)之后，數(shù)據(jù)也正常提交給了后臺(tái)，往往數(shù)據(jù)可能還需要編輯或修改，那就會(huì)涉及到數(shù)據(jù)的回顯問(wèn)題。
// 定義一個(gè)test方法，和echoData查看回顯的數(shù)據(jù)是否正確
// 數(shù)據(jù)回顯
echoData () {
this.isChange = false
this.arr3 = this.echoList // arr3提到data中全局保存
let courseList = [] // 保存多選的值
let obj = {}
// 回顯時(shí)初始化單選值(年級(jí))
this.grade = this.echoList.map(item => {
return { grade: { ...item.grade } }
})
// 回顯時(shí)初始化多選值(課程)
for (let key in this.echoList) {
let obj = {}
obj['courseList'] = this.echoList[key]['courseList']
this.courseList.push(obj)
}
// 1.拆分后臺(tái)數(shù)據(jù)，構(gòu)造年級(jí)回顯
this.options1 = this.echoList.map(item => {
item.courseList.forEach(val => {
courseList.push(val)
})
return {
value: item.grade['id'],
label: item.grade['gradeName']
}
})
// 數(shù)組對(duì)象去重
courseList = courseList.reduce((a, b) => {
obj[b.id] ? '' : obj[b.id] = true && a.push(b)
return a
}, [])
// 2.拆分后臺(tái)數(shù)據(jù)，構(gòu)造科目回顯
this.options = courseList.map(item => {
return {
value: item.id,
label: item.courseName
}
})
// 3.拆分后臺(tái)數(shù)據(jù)，構(gòu)造動(dòng)態(tài)綁定的數(shù)據(jù)回顯
this.list3 = this.echoList.map(item => {
let course = []
item.courseList.forEach(val => {
course.push(val.id)
})
return {
gradeList: item.grade['id'],
courseList: course
}
})
console.log(this.arr3)
},
// 用于檢查回顯數(shù)據(jù)的賦值是否正確
test () {
this.courseList = []
this.grade = []
// 回顯時(shí)初始化單選值(年級(jí))
this.grade = this.echoList.map(item => {
return { grade: { ...item.grade } }
})
// 回顯時(shí)初始化多選值(課程)
for (let key in this.echoList) {
let obj = {}
obj['courseList'] = this.echoList[key]['courseList']
this.courseList.push(obj)
}
console.log(this.grade)
console.log(this.courseList)
}完整示例
這里暫時(shí)不對(duì)代碼進(jìn)行優(yōu)化處理。
<template>
<div class="app">
<!--// 輸入式-->
<!--<div v-for="item in table" :key="item.id">-->
<!--<el-input v-model="item.label" class="el-input"></el-input>-->
<!--</div>-->
<!--單選式-->
<!-- <div v-for="item in list" :key="item.id">
<el-select
class="el-select"
v-model="item.courseId"
placeholder="請(qǐng)選擇">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="item.grade" class="el-input"></el-input>
</div>-->
<!--組合式-->
<!-- <div v-for="item in list2" :key="item.id">
<el-select
class="el-select"
v-model="item.courseId"
placeholder="請(qǐng)選擇科目"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="item.grade" class="el-input" placeholder="請(qǐng)?zhí)顚?xiě)分?jǐn)?shù)"></el-input>
</div>-->
<!--組合式(回顯名稱)-->
<!-- <div v-for="(item,index) in list2" :key="item.id">
<el-select
class="el-select"
v-model="item.courseId"
placeholder="請(qǐng)選擇科目"
@change="changeOneCourse($event,index)"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="item.grade" class="el-input" placeholder="請(qǐng)?zhí)顚?xiě)分?jǐn)?shù)"></el-input>
</div>-->
<!--單選、多選組合式-->
<div v-for="(item,index) in list3" :key="item.id">
<el-select v-model="item.gradeList" placeholder="請(qǐng)選擇年級(jí)" @change="changeGrad($event,index)">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="item.courseList" multiple placeholder="請(qǐng)選擇科目" @change="changeSelect($event,index)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<el-button @click="addInput">添加</el-button>
<el-button @click="search">查看</el-button>
<el-button @click="echoData">回顯</el-button>
<el-button @click="test">測(cè)試</el-button>
</div>
</template>
<script>
export default {
name: 'teacher',
data () {
return {
value1: [],
table: [
{ id: '12121', label: '' }
],
list: [
{ courseId: '', id: '1' }
],
list1: [
{ courseId: '', id: '1', grade: '' }
],
list2: [
{ courseId: '', id: '1', grade: '', courseName: '' }
],
list3: [
{ gradeList: '', id: '1', courseList: '' }
],
options: [
{ value: '123', label: '英語(yǔ)' },
{ value: '456', label: '數(shù)學(xué)' },
{ value: '868', label: '語(yǔ)文' },
{ value: '672', label: '化學(xué)' },
{ value: '684', label: '物理' }
],
options1: [
{ value: '1238635', label: '一年級(jí)' },
{ value: '4568635', label: '二年級(jí)' },
{ value: '8688635', label: '三年級(jí)' },
{ value: '6728635', label: '八年級(jí)' },
{ value: '6848635', label: '九年級(jí)' }
],
courseList: [], // 存放多選
grade: [], // 存放單選
name: [],
gradeList: [], // 分?jǐn)?shù)列表
echoList: [
{
'id': '55cca14cad60430191c0c3840a63b50c',
'grade': {
'id': 'd3d16e7edcbb4c1fb09759725c956dd4',
'gradeName': '二年級(jí)'
},
'courseList': [
{
'id': '1455377986034917378',
'courseName': '地理'
},
{
'id': '1455377934050713601',
'courseName': '數(shù)學(xué)'
}
]
},
{
'id': '55cca14cad60430191c0c3840a63b50c',
'grade': {
'id': 'fe3c385ab7c745a692f2c4b32c0cb2a0',
'gradeName': '八年級(jí)'
},
'courseList': [
{
'id': '1455377934050713601',
'courseName': '數(shù)學(xué)'
},
{
'id': '1455377958553837569',
'courseName': '歷史'
}
]
}
],
isChange: false,
arr3: []
}
},
methods: {
addInput () {
this.table.push({ id: Date.now(), label: '' })
this.list.push({ id: Date.now(), courseId: '' })
this.list1.push({ id: Date.now(), courseId: '', grade: '' })
this.list2.push({ id: Date.now(), courseId: '', grade: '', courseName: '' })
this.list3.push({ id: Date.now(), gradeList: '', courseList: '' })
},
search () {
// 根據(jù)isChange判斷數(shù)據(jù)是否發(fā)生變化，如果沒(méi)發(fā)生變化arr3則為后臺(tái)返回的數(shù)據(jù)，說(shuō)明頁(yè)面未發(fā)生變化
if (this.isChange) {
this.arr3 = []
for (let i = 0; i < this.courseList.length; i++) {
this.arr3.push(Object.assign(this.courseList[i] || {}, this.grade[i] || {})) // 合并數(shù)組對(duì)象
}
}
console.log(this.arr3) // 輸出傳給后臺(tái)的結(jié)構(gòu)
},
// 處理多選的值
changeSelect (val, index) {
this.isChange = true
let courseList = { courseList: [] }
this.name = []
this.courseList[index] = courseList // 初始化第一個(gè)值
// =====================根據(jù)變化的值賦值，有就賦值，無(wú)就刪除===========================
for (let i = 0; i <= val.length - 1; i++) {
this.options.find((item) => {
if (item.value === val[i]) {
this.name.push(item.label) // 根據(jù)綁定值id獲取到名稱label
}
})
}
// =====================進(jìn)行賦值===========================
for (let i = 0; i <= val.length - 1; i++) {
let obj = {}
obj['courseId'] = val[i]
obj['courseName'] = this.name[i]
this.courseList[index]['courseList'].push(obj)
}
console.log(this.courseList) // 相當(dāng)于多選課程的數(shù)據(jù)
},
// 處理單選的值
// changeOneCourse (val, index) {
// this.options.find((item) => {
// if (item.value === val) {
// this.list2[index]['courseName'] = item.label // 根據(jù)綁定值id獲取到名稱label
// }
// })
// },
changeGrad (val, index) {
this.isChange = true
// this.options1.find((item) => {
// if (item.value === val) {
// this.list2[index]['gradeName'] = item.label // 根據(jù)綁定值id獲取到名稱label
// }
// })
let grade = { grade: { gradeName: '', gradeId: '' } }
let gradeName = ''
this.grade[index] = grade // 初始化第一個(gè)值
this.options1.find((item) => {
if (item.value === val) {
gradeName = item.label // 根據(jù)綁定值id獲取到名稱label
}
})
// =====================進(jìn)行賦值===========================
this.grade[index]['grade']['gradeName'] = gradeName
this.grade[index]['grade']['gradeId'] = val
console.log(this.grade) // 相當(dāng)于單選年級(jí)的數(shù)據(jù)
},
// 數(shù)據(jù)回顯
echoData () {
this.isChange = false
this.arr3 = this.echoList // arr3提到data中全局保存
let courseList = [] // 保存多選的值
let obj = {}
// 回顯時(shí)初始化單選值(年級(jí))
this.grade = this.echoList.map(item => {
return { grade: { ...item.grade } }
})
// 回顯時(shí)初始化多選值(課程)
for (let key in this.echoList) {
let obj = {}
obj['courseList'] = this.echoList[key]['courseList']
this.courseList.push(obj)
}
// 1.拆分后臺(tái)數(shù)據(jù)，構(gòu)造年級(jí)回顯
this.options1 = this.echoList.map(item => {
item.courseList.forEach(val => {
courseList.push(val)
})
return {
value: item.grade['id'],
label: item.grade['gradeName']
}
})
// 數(shù)組對(duì)象去重
courseList = courseList.reduce((a, b) => {
obj[b.id] ? '' : obj[b.id] = true && a.push(b)
return a
}, [])
// 2.拆分后臺(tái)數(shù)據(jù)，構(gòu)造科目回顯
this.options = courseList.map(item => {
return {
value: item.id,
label: item.courseName
}
})
// 3.拆分后臺(tái)數(shù)據(jù)，構(gòu)造動(dòng)態(tài)綁定的數(shù)據(jù)回顯
this.list3 = this.echoList.map(item => {
let course = []
item.courseList.forEach(val => {
course.push(val.id)
})
return {
gradeList: item.grade['id'],
courseList: course
}
})
console.log(this.arr3)
},
test () {
this.courseList = []
this.grade = []
// 回顯時(shí)初始化單選值(年級(jí))
this.grade = this.echoList.map(item => {
return { grade: { ...item.grade } }
})
// 回顯時(shí)初始化多選值(課程)
for (let key in this.echoList) {
let obj = {}
obj['courseList'] = this.echoList[key]['courseList']
this.courseList.push(obj)
}
console.log(this.grade)
console.log(this.courseList)
}
}
}
</script>
<style lang="scss" scoped>
.app{
margin: 50px auto;
width: 500px;
}
.el-input{
margin-bottom: 20px;
width: 200px;
}
.el-select{
margin-bottom: 20px;
margin-right: 10px;
}
</style>總結(jié)
1、動(dòng)態(tài)添加Input，需要密切關(guān)注頁(yè)面和后臺(tái)數(shù)據(jù)的處理，簡(jiǎn)單的直接綁定v-for的item，復(fù)雜的需要根據(jù)具體需求，進(jìn)行調(diào)整；
2、獲取id的同時(shí)利用find()獲取名稱；
3、純數(shù)組合與數(shù)組對(duì)象之間的轉(zhuǎn)換、合并，利用循環(huán)合自定義obj={}保存對(duì)象，并循環(huán)輸出；
4、數(shù)組對(duì)象的合并，利用Object.assign(),先合并對(duì)象；
5、同時(shí)獲取名稱和id需要在change方法里面，同時(shí)進(jìn)行，根據(jù)有值就添加，無(wú)值就刪除原理；
6、數(shù)據(jù)回顯，要保證數(shù)據(jù)跟動(dòng)態(tài)添加時(shí)的綁定值一致 。
單選切換多選（補(bǔ)充）
當(dāng)輸入框根據(jù)條件，既可以單選，又可以多選時(shí)，會(huì)出現(xiàn)切換模式時(shí)，無(wú)法清除數(shù)據(jù)的問(wèn)題。
<div class="select">
<el-select v-model="grade" placeholder="請(qǐng)選擇年級(jí)" clearable @change="changeGrade">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
<el-select v-if="isShowSelect" v-model="course" placeholder="請(qǐng)選擇課程" clearable :multiple="isMultiple === '1'">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"
/>
</el-select>
<script>
data () {
return {
isMultiple: '0',
isShowSelect: true,
isShow: false,
course: '',
grade: '',
options: [
{ value: '1238635', label: '一年級(jí)', isMultiple: '0' },
{ value: '4568635', label: '二年級(jí)', isMultiple: '0' },
{ value: '8688635', label: '三年級(jí)', isMultiple: '1' },
{ value: '6728635', label: '八年級(jí)', isMultiple: '1' },
{ value: '6848635', label: '九年級(jí)', isMultiple: '1' }
],
options1: [
{ value: '123', label: '英語(yǔ)' },
{ value: '456', label: '數(shù)學(xué)' },
{ value: '868', label: '語(yǔ)文' },
{ value: '672', label: '化學(xué)' },
{ value: '684', label: '物理' }
]
}
},
methods: {
if (val) {
// 改變年級(jí)時(shí)，判斷是否可多選
this.isMultiple = this.options.find(item => item.value === val).isMultiple
// 多選時(shí),綁定的是數(shù)組，單選綁定的是字符串，出現(xiàn)問(wèn)題的地方可能是這里
this.isMultiple === '1' ? this.course = [] : this.course = ''
}
}
</script> 
可能是切換模式時(shí)，需要重新 v-model，但容器又沒(méi)有重新渲染導(dǎo)致，因此可以在切換的時(shí)候，讓容器重新渲染，重新 v-model ，首先給選擇課程添加 v-if，，然后觀察 isMultiple 的變化，變化時(shí)，讓課程容器重新渲染即可。
watch: {
isMultiple (val) {
if (val) {
this.isShowSelect = false
setTimeout(() => {
this.isShowSelect = true
})
}
}
},下拉框渲染卡頓問(wèn)題（補(bǔ)充）
當(dāng)渲染的數(shù)據(jù)量很大時(shí)，一次性渲染，會(huì)造成頁(yè)面卡頓，甚至內(nèi)存溢出現(xiàn)象，一次性渲染超過(guò)2000條數(shù)據(jù)的下拉框，就會(huì)出現(xiàn)卡頓現(xiàn)象(小編自測(cè)的結(jié)果，不一定準(zhǔn)確)。解決的方法是：分頁(yè)，同時(shí)支持搜索，那就可以使用 Element 的 Cascader 級(jí)聯(lián)選擇器。
<el-cascader
filterable
ref="cascader"
:options="options"
:key="dialogData.pushType"
:disabled="!(dialogData.pushType)"
:props="optionsProps"
:placeholder="optionsValue.length>0?optionsValue.map(item=>{return item.label}).join(','):placeholder"
:show-all-levels="false"
@change="changeOptionValue"
v-model="optionsValue"
size="mini">
</el-cascader>
<el-pagination
v-if="managersTotal > 1000 && dialogData.pushType === '03'"
@current-change="managersCurrentChange"
:page-size="1000"
layout="total, prev, pager, next"
:total="managersTotal">
</el-pagination>
既然多數(shù)據(jù)，那必然需要支持多選。
分頁(yè)下的多選，在點(diǎn)擊下一頁(yè)的時(shí)候，會(huì)把上一頁(yè)選擇的數(shù)據(jù)清空，怎么辦呢？
那就把在上頁(yè)中選擇的數(shù)據(jù)，保存起來(lái)，在下一頁(yè)中，加入渲染中去即可。
// @change 中保存選擇的數(shù)據(jù)
changeOptionValue (val) {
this.saveOptionsValue = val; // 保存選擇的數(shù)據(jù)
},
// 在點(diǎn)擊下一頁(yè)時(shí)，把上一頁(yè)選擇的數(shù)據(jù) push 到渲染中去
managersCurrentChange (val) {
const hash = {};
// 每次點(diǎn)擊時(shí)，把重復(fù)數(shù)據(jù)過(guò)濾掉，不然點(diǎn)擊一次，就會(huì) push 一次重復(fù)數(shù)據(jù)
this.pushOptionsList = this.saveOptionsValue.reduce(function (prev, cur) {
!hash[cur.value] ? hash[cur.value] = prev.push({ label: cur.label, value: { value: cur.value, label: cur.label } }) : '';
return prev;
}, []);
this.optionsValue = this.saveOptionsValue;
this.managersPageNo = val;
this.renderData(); // 接口調(diào)用，渲染數(shù)據(jù)
},
renderData(){
.......
// 把上一頁(yè)選擇的數(shù)據(jù)，加到數(shù)組最前面
this.pushOptionsList.length !== 0 && this.List.unshift(...this.pushOptionsList);
}最后，在數(shù)據(jù)渲染時(shí)，要給一個(gè)渲染中的提示，最好是全局的，同時(shí)禁止用戶其他的操作。畢竟數(shù)據(jù)量多，渲染需要一定的時(shí)間，這段時(shí)間不能被其他操作影響。
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
當(dāng)然分頁(yè)是不太符合頁(yè)面操作邏輯的，數(shù)據(jù)多的時(shí)候，應(yīng)該滿足模糊搜索，而不是一頁(yè)頁(yè)去查，再進(jìn)行搜索。 查這一步，明顯多余，那一步到位的做法是什么呢？element的Select選擇器就給我們提供了，遠(yuǎn)程搜索的功能
<el-select
:size="isType? 'medium':'mini'"
v-model="optionsValue"
multiple
filterable
remote
reserve-keyword
placeholder="請(qǐng)輸入姓名進(jìn)行搜索"
:remote-method="remoteMethod"
loading-text="搜索中..."
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<script>
// 遠(yuǎn)程搜索
remoteMethod (query) {
if (query !== '') {
setTimeout(() => {
// 調(diào)用接口，模糊查詢
}, 200);
} else {
this.managersList = [];
}
},
</script>注意：當(dāng)el-select開(kāi)啟多選的時(shí)候，size最好是medium以上，不然，有時(shí)候會(huì)發(fā)生頁(yè)面抖動(dòng)現(xiàn)象
雙循環(huán)遍歷優(yōu)化
在拆分后臺(tái)數(shù)據(jù)，構(gòu)造年級(jí)回顯時(shí)，用到了下面所示代碼
可以看到使用map()和forEach循環(huán)遍歷數(shù)據(jù)，這里雙循環(huán)的時(shí)間復(fù)雜度為O(n²)，當(dāng)數(shù)據(jù)量大的時(shí)候，太消耗性能了，因此需要優(yōu)化一下，
// 1.拆分后臺(tái)數(shù)據(jù)，構(gòu)造年級(jí)回顯
this.options1 = this.echoList.map(item => {
item.courseList.forEach(val => {
courseList.push(val)
})
return {
value: item.grade['id'],
label: item.grade['gradeName']
}
})
// 優(yōu)化代碼，拆分雙層遍歷，降低時(shí)間復(fù)雜度，O(n)
this.echoList.map(item => {return item.courseList}).forEach(val =>{
courseList.push(...val)
})
this.options1 = echoList.map(item =>{
return {
value: item.grade['id'],
label: item.grade['gradeName']
}
})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue props數(shù)據(jù)傳遞類型限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
前端文件導(dǎo)出設(shè)置responseType為blob時(shí)遇到的問(wèn)題及解決
這篇文章主要給大家介紹了關(guān)于前端文件導(dǎo)出設(shè)置responseType為blob時(shí)遇到的問(wèn)題及解決方法,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式
這篇文章主要介紹了vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vite+vue3+ts項(xiàng)目新建以及解決遇到的問(wèn)題
vite是一個(gè)基于Vue3單文件組件的非打包開(kāi)發(fā)服務(wù)器,它具有快速的冷啟動(dòng),不需要等待打包操作,下面這篇文章主要給大家介紹了關(guān)于vite+vue3+ts項(xiàng)目新建以及解決遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue+elementui實(shí)現(xiàn)下拉表格多選和搜索功能
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)下拉表格多選和搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue中關(guān)閉當(dāng)前頁(yè)面的方法與原生JavaScript類似,都是通過(guò)window對(duì)象的close方法實(shí)現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁(yè)面的方法,需要的朋友可以參考下2023-09-09
vue頁(yè)面中使用getElementsByClassName無(wú)法獲取元素的解決
這篇文章主要介紹了vue頁(yè)面中使用getElementsByClassName無(wú)法獲取元素的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實(shí)現(xiàn)滑塊拖拽校驗(yàn)功能的全過(guò)程
vue驗(yàn)證滑塊功能,在生活中很多地方都可以見(jiàn)到,使用起來(lái)非常方便,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)滑塊拖拽校驗(yàn)功能的相關(guān)資料,需要的朋友可以參考下2021-08-08
最近學(xué)習(xí)了Vue3,利用vue3做了個(gè)好玩的項(xiàng)目,所以下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3模仿Windows窗口的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04