Vue+Element一步步实现动态添加Input_输入框案例_vue.js_

 list: [ { courseId: '', id: '1' } ], options: [ { value: '123', label: '英语' }, { value: '456', label: '数学' }, { value: '868', label: '语文' }, { value: '672', label: '化学' }, { value: '684', label: '物理' } ], // 动态添加 addInput () { this.list.push({ id: Date.now(), courseId: '' }) },

 list1: [ { courseId: '', id: '1', grade: '' } ], options: [ { value: '123', label: '英语' }, { value: '456', label: '数学' }, { value: '868', label: '语文' }, { value: '672', label: '化学' }, { 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" // } // ]

// 后台接收的数据 courseList:[ {courseId: '', grade: '', courseName: '' } {courseId: '', grade: '', courseName: '' } ]

 changeOneCourse(val, index) { this.options.find((item) => { if (item.value === val) { this.list2[index]['courseName'] = item.label // 根据绑定值id获取到名称label } }) } // this.list2: [ // { // "courseId":"123", // "id":"1", // "grade":"96", // "courseName":"英语" // } // ]

 gradeList:[ { courseList: [ { courseId: '', courseName: '' }, { courseId: '', courseName: '' } ], gradeData: { grade: '', gradeName: ' ' } } ]

添加查看

 list3: [ { gradeList: '', id: '1', courseList: '' } ], options: [ { value: '123', label: '英语' }, { value: '456', label: '数学' }, { value: '868', label: '语文' }, { value: '672', label: '化学' }, { value: '684', label: '物理' } ], options1: [ { value: '1238635', label: '一年级' }, { value: '4568635', label: '二年级' }, { value: '8688635', label: '三年级' }, { value: '6728635', label: '八年级' }, { value: '6848635', label: '九年级' } ], 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] || {})) // 合并数组对象 } console.log(arr3) // 输出传给后台的结构 }, // 处理多选的值 changeSelect (val, index) { let courseList = { courseList: [] } this.name = [] this.courseList[index] = courseList // 初始化第一个值 // =====================根据变化的值赋值，有就赋值，无就删除=========================== for (let i = 0; i <= val.length - 1; i++) { this.options.find((item) => { if (item.value === val[i]) { this.name.push(item.label) // 根据绑定值id获取到名称label } }) } // =====================进行赋值=========================== 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) // 相当于多选课程的数据 }, changeGrad (val, index) { this.options1.find((item) => { if (item.value === val) { this.list2[index]['gradeName'] = item.label // 根据绑定值id获取到名称label } }) let grade = { grade: { gradeName: '', gradeId: '' } } // let gradeName = '' this.grade[index] = grade // 初始化第一个值 this.options1.find((item) => { if (item.value === val) { gradeName = item.label // 根据绑定值id获取到名称label } }) // =====================进行赋值=========================== this.grade[index]['grade']['gradeName'] = gradeName this.grade[index]['grade']['gradeId'] = val console.log(this.grade) // 相当于单选年级的数据 } }

// 定义一个test方法，和echoData查看回显的数据是否正确 // 数据回显 echoData () { this.isChange = false this.arr3 = this.echoList // arr3提到data中全局保存 let courseList = [] // 保存多选的值 let obj = {} // 回显时初始化单选值(年级) this.grade = this.echoList.map(item => { return { grade: { ...item.grade } } }) // 回显时初始化多选值(课程) for (let key in this.echoList) { let obj = {} obj['courseList'] = this.echoList[key]['courseList'] this.courseList.push(obj) } // 1.拆分后台数据，构造年级回显 this.options1 = this.echoList.map(item => { item.courseList.forEach(val => { courseList.push(val) }) return { value: item.grade['id'], label: item.grade['gradeName'] } }) // 数组对象去重 courseList = courseList.reduce((a, b) => { obj[b.id] ? '' : obj[b.id] = true && a.push(b) return a }, []) // 2.拆分后台数据，构造科目回显 this.options = courseList.map(item => { return { value: item.id, label: item.courseName } }) // 3.拆分后台数据，构造动态绑定的数据回显 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 = [] // 回显时初始化单选值(年级) this.grade = this.echoList.map(item => { return { grade: { ...item.grade } } }) // 回显时初始化多选值(课程) 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) }