iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue+Element一步步实现动态添加Input_输入框案例
  • 506

0
分享到

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

2024-04-02 19:04:59 506人浏览 安东尼
摘要

目录输入式动态添加单选式动态添加组合式动态添加组合式动态添加(回传名称)单选、多选组合式数据回显完整示例总结单选切换多选（补充）下拉框渲染卡顿问题（补充）双循环遍历优化输入式动态添加

输入式动态添加

输入式：即input的值由用户输入；例如：通过自定义用户标签，给用户动态添加多个标签。

<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: {
    // 动态添加
    addInput () {
      this.table.push({ id: Date.now(), label: '' })
    },
    // 查看
    search () {
      console.log(this.table)
    },
  }
  }
</script>

单选式动态添加

例如：给一名老师动态添加多个监考科目，后台接收科目代码(courseId)。

<div v-for="(item,index) in list" :key="item.id">
    <el-select
      class="el-select"
      v-model="item.courseId"
      placeholder="请选择"
      @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: '英语' },
        { value: '456', label: '数学' },
        { value: '868', label: '语文' },
        { value: '672', label: '化学' },
        { value: '684', label: '物理' }
      ],
    // 动态添加
    addInput () {
      this.list.push({ id: Date.now(), courseId: '' })
    },

组合式动态添加

例如：给学生各个科目打上分数。

 <div v-for="item in list1" :key="item.id">
    <el-select
      class="el-select"
      v-model="item.courseId"
      placeholder="请选择科目"   
     >
      <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="请填写分数"></el-input>
  </div>
      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"
      //   }
      // ]

组合式动态添加(回传名称)

例如：给学生各个科目打上分数，后端需要同时接收科目名称和科目id。

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

这时候，只需要给el-select添加change事件，在获取id的同时获取到名称即可。

<div v-for="(item,index) in list2" :key="item.id">
    <el-select
      class="el-select"
      v-model="item.courseId"
      placeholder="请选择科目"
      @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="请填写分数"></el-input>
  </div>
 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":"英语"
      // }
      // ]

单选、多选组合式

例如：给各个年级添加不同科目，后端需要同时接收【科目名称，科目id】，【年级id，年级名称】。

 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="请选择年级" @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="请选择科目" @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: '英语' },
        { 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)
    }

完整示例

这里暂时不对代码进行优化处理。

<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="请选择">
    <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="请选择科目"
     >
      <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="请填写分数"></el-input>
  </div>-->
  <!--组合式(回显名称)-->
<!--  <div v-for="(item,index) in list2" :key="item.id">
    <el-select
      class="el-select"
      v-model="item.courseId"
      placeholder="请选择科目"
      @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="请填写分数"></el-input>
  </div>-->
  <!--单选、多选组合式-->
<div v-for="(item,index) in list3" :key="item.id">
  <el-select v-model="item.gradeList" placeholder="请选择年级" @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="请选择科目" @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">测试</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: '英语' },
        { 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: [],
      gradeList: [], // 分数列表
      echoList: [
        {
          'id': '55cca14cad60430191c0c3840a63b50c',
          'grade': {
            'id': 'd3D16e7edcbb4c1fb09759725c956dd4',
            'gradeName': '二年级'
          },
          'courseList': [
            {
              'id': '1455377986034917378',
              'courseName': '地理'
            },
            {
              'id': '1455377934050713601',
              'courseName': '数学'
            }
          ]
        },
        {
          'id': '55cca14cad60430191c0c3840a63b50c',
          'grade': {
            'id': 'fe3c385ab7c745a692f2c4b32c0cb2a0',
            'gradeName': '八年级'
          },
          'courseList': [
            {
              'id': '1455377934050713601',
              'courseName': '数学'
            },
            {
              '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 () {
      // 根据isChange判断数据是否发生变化，如果没发生变化arr3则为后台返回的数据，说明页面未发生变化
      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] || {})) // 合并数组对象
        }
      }
 
      console.log(this.arr3) // 输出传给后台的结构
    },
    // 处理多选的值
    changeSelect (val, index) {
      this.isChange = true
      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) // 相当于多选课程的数据
    },
    // 处理单选的值
    // changeOneCourse (val, index) {
    //   this.options.find((item) => {
    //     if (item.value === val) {
    //       this.list2[index]['courseName'] = item.label // 根据绑定值id获取到名称label
    //     }
    //   })
    // },
    changeGrad (val, index) {
      this.isChange = true
      // 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) // 相当于单选年级的数据
    },
    // 数据回显
    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)
    }
  }
}
</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>

总结

 1、动态添加Input，需要密切关注页面和后台数据的处理，简单的直接绑定v-for的item，复杂的需要根据具体需求，进行调整；

2、获取id的同时利用find()获取名称；

3、纯数组合与数组对象之间的转换、合并，利用循环合自定义obj={}保存对象，并循环输出；

4、数组对象的合并，利用Object.assign(),先合并对象；

5、同时获取名称和id需要在change方法里面，同时进行，根据有值就添加，无值就删除原理；

6、数据回显，要保证数据跟动态添加时的绑定值一致 。

单选切换多选（补充）

当输入框根据条件，既可以单选，又可以多选时，会出现切换模式时，无法清除数据的问题。

 <div class="select">
      <el-select v-model="grade" placeholder="请选择年级" 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="请选择课程" 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: '一年级', isMultiple: '0' },
        { value: '4568635', label: '二年级', isMultiple: '0' },
        { value: '8688635', label: '三年级', isMultiple: '1' },
        { value: '6728635', label: '八年级', isMultiple: '1' },
        { value: '6848635', label: '九年级', isMultiple: '1' }
      ],
      options1: [
        { value: '123', label: '英语' },
        { value: '456', label: '数学' },
        { value: '868', label: '语文' },
        { value: '672', label: '化学' },
        { value: '684', label: '物理' }
      ]
    }
  },
 methods: {
      if (val) {
        // 改变年级时，判断是否可多选
        this.isMultiple = this.options.find(item => item.value === val).isMultiple
       // 多选时,绑定的是数组，单选绑定的是字符串，出现问题的地方可能是这里
        this.isMultiple === '1' ? this.course = [] : this.course = ''
      }
}
</script>

  

可能是切换模式时，需要重新 v-model，但容器又没有重新渲染导致，因此可以在切换的时候，让容器重新渲染，重新 v-model ，首先给选择课程添加 v-if，，然后观察 isMultiple 的变化，变化时，让课程容器重新渲染即可。

 watch: {
    isMultiple (val) {
      if (val) {
        this.isShowSelect = false
        setTimeout(() => {
          this.isShowSelect = true
        })
      }
    }
  },

下拉框渲染卡顿问题（补充）

当渲染的数据量很大时，一次性渲染，会造成页面卡顿，甚至内存溢出现象，一次性渲染超过2000条数据的下拉框，就会出现卡顿现象(小编自测的结果，不一定准确)。解决的方法是：分页，同时支持搜索，那就可以使用 Element 的 Cascader 级联选择器。

          <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>

 既然多数据，那必然需要支持多选。

分页下的多选，在点击下一页的时候，会把上一页选择的数据清空，怎么办呢？

那就把在上页中选择的数据，保存起来，在下一页中，加入渲染中去即可。

 // @change 中保存选择的数据 
 changeOptionValue (val) {
      this.saveOptionsValue = val; // 保存选择的数据 
  },
 
 // 在点击下一页时，把上一页选择的数据 push 到渲染中去
 managersCurrentChange (val) {
      const hash = {};
     // 每次点击时，把重复数据过滤掉，不然点击一次，就会 push 一次重复数据
      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(); // 接口调用，渲染数据
    },
renderData(){
 .......
 // 把上一页选择的数据，加到数组最前面
  this.pushOptionsList.length !== 0 && this.List.unshift(...this.pushOptionsList);
}

最后，在数据渲染时，要给一个渲染中的提示，最好是全局的，同时禁止用户其他的操作。毕竟数据量多，渲染需要一定的时间，这段时间不能被其他操作影响。

 openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      }

当然分页是不太符合页面操作逻辑的，数据多的时候，应该满足模糊搜索，而不是一页页去查，再进行搜索。 查这一步，明显多余，那一步到位的做法是什么呢？element的Select选择器就给我们提供了，远程搜索的功能

<el-select
  :size="isType? 'medium':'mini'"
  v-model="optionsValue"
  multiple
  filterable
  remote
  reserve-keyWord
  placeholder="请输入姓名进行搜索"
  :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>
 // 远程搜索
    remoteMethod (query) {
      if (query !== '') {
        setTimeout(() => {
         // 调用接口，模糊查询
        }, 200);
      } else {
        this.managersList = [];
      }
    },
</script>

注意：当el-select开启多选的时候，size最好是medium以上，不然，有时候会发生页面抖动现象

双循环遍历优化

在拆分后台数据，构造年级回显时，用到了下面所示代码

可以看到使用map()和forEach循环遍历数据，这里双循环的时间复杂度为O(n²)，当数据量大的时候，太消耗性能了，因此需要优化一下，

// 1.拆分后台数据，构造年级回显
      this.options1 = this.echoList.map(item => {
        item.courseList.forEach(val => {
          courseList.push(val)
        })
        return {
          value: item.grade['id'],
          label: item.grade['gradeName']
        }
      })
 
// 优化代码，拆分双层遍历，降低时间复杂度，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']
                }
    })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue+Element一步步实现动态添加Input_输入框案例

本文链接: https://www.lsjlt.com/news/167867.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Vue+Element一步步实现动态添加Input_输入框案例
    目录输入式动态添加单选式动态添加组合式动态添加组合式动态添加(回传名称)单选、多选组合式数据回显完整示例总结单选切换多选（补充）下拉框渲染卡顿问题（补充）双循环遍历优化输入式动态添加...
    99+
    2024-04-02
  • jQuery如何实现动态添加、删除按钮及input输入框
    这篇文章给大家分享的是有关jQuery如何实现动态添加、删除按钮及input输入框的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体如下：<html> <hea...
    99+
    2024-04-02
  • Vue一个动态添加background-image的实现
    目录Vue一个动态添加background-imageVue踩坑background-image路径结合实际情况，处理方法如下扩展：图片格式（base64）总结Vue一个动态添加ba...
    99+
    2023-03-11
    Vue动态添加 Vue background-image Vue添加background-image
  • Vue如何实现异步动态加载块
    本篇内容介绍了“Vue如何实现异步动态加载块”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！首先定义组件为异步加载define(['j...
    99+
    2023-07-04
  • Vue如何实现动态渲染input输入框
    本文小编为大家详细介绍“Vue如何实现动态渲染input输入框”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue如何实现动态渲染input输入框”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。问题描述就比如现在...
    99+
    2023-07-04
  • vue一步到位的实现动态路由
    目录静态路由的回顾动态路由的配置说一些笔者遇到的问题后记最近在写vue项目，需要由后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)，就是配置vue动态路由啦...
    99+
    2024-04-02
  • vue怎么一步到位实现动态路由
    今天小编给大家分享一下vue怎么一步到位实现动态路由的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先呢，先看看静态路由的配...
    99+
    2023-06-30
  • vue输入框怎么实现输完后光标自动跳到下一个输入框中
    本篇内容主要讲解“vue输入框怎么实现输完后光标自动跳到下一个输入框中”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue输入框怎么实现输完后光标自动跳到下一个输入框中”吧!实现思路首先我们需要...
    99+
    2023-07-05
  • vue输入框中输完后光标自动跳到下一个输入框中的实现方法
    目录前言实现思路完整源码实现效果总结前言 最近接到这么一个需求，做一个安全码的输入框，限制为6位数，但是每一个写入的值都是一个输入框，共计6个输入框，当前输入框写入值后，光标自动跳到...
    99+
    2023-03-07
    按下回车键跳到下个输入框 vue输入框跳到下个
  • VUE路由动态加载的实践技巧：一步一步打造灵活的前端应用
    1、配置路由规则 VUE路由动态加载的第一步是配置路由规则。在VUE路由的配置中，可以使用component属性指定路由加载的组件。对于动态加载，可以使用component: () => import("path/to/compo...
    99+
    2024-02-13
    文章 VUE 路由 动态加载 前端应用
  • vue中怎么实现一个自动补全的输入框
    本篇文章给大家分享的是有关vue中怎么实现一个自动补全的输入框，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。显示div将内容撑开，改变其他组件...
    99+
    2024-04-02
  • Vue通过字符串关键字符实现动态渲染input输入框
    目录问题描述{ xxx } 标识字符渲染Dom组件设计组件开发重点输入完成事件动态编辑文本今天做一个简单的demo，就是有一个字符串，字符串里面有标识符，前端检测到标识符之后，需要将...
    99+
    2022-12-08
    Vue动态渲染input输入框 Vue 渲染input输入框 Vue input输入框
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作