动态添加和删除下拉框

最新推荐文章于 2022-11-04 11:45:17 发布

小胖不怂！

最新推荐文章于 2022-11-04 11:45:17 发布

阅读量923

点赞数

分类专栏： vue 前端文章标签： vue elementui 前端

本文链接：https://blog.csdn.net/weixin_46359814/article/details/122169957

版权

vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端

13 篇文章 0 订阅

订阅专栏

实现效果：点击添加排序列，增加一个下拉框组合，点击减号，删除当前下拉框组
在这里插入图片描述
1、这里我使用el-form去实现下拉框的动态添加

<el-form ref="form" :model="form" :inline="true" label-width="20px"
                   style="display: inline-block;height: 83px">
   <div style="width: 100%;height: 82px">
     <el-form-item v-for="(valueItem,index) in form.value" :key="index" :rules="rules"
                   style="width: 11vw;height: 120px;margin-left: 30px;margin-bottom: 10px">
       <el-select size="mini" v-model="valueItem.column" @change="sortChange(valueItem)" placeholder="请选择列"
                  style="width: 9vw">
         <el-option :label="column" :value="column" v-for="(column,index) in columns" :key="index"></el-option>
       </el-select>
       <i class="el-icon-remove-outline" style="font-size: 1.5vw;margin-top: 32px;float: right;"
          @click.prevent="removeValueItem(valueItem,index)">
       </i>
       <el-select size="mini" v-model="valueItem.sortBy" @change="sortChange(valueItem)" placeholder="请选择排序"
                  style="width: 9vw;">
         <el-option label="升序" value="ASC"></el-option>
         <el-option label="降序" value="DESC"></el-option>
       </el-select>
     </el-form-item>
   </div>
 </el-form>
 <el-button size="mini" class="add_sort_column" icon="el-icon-s-fold" @click="addSortColumn">
	 <span>添加排序列</span>
 </el-button>

变量：

form: {
   value: [{
     column: '', // 字段
     sortBy: '' // 排序
   }]
 },

方法：addSortColumn实现添加。removeValueItem实现删除。sortChange实现下拉框change事件

	// 添加排序列操作
   addSortColumn() {
       this.form.value.push({
         column: '', // 字段
         sortBy: '' // 排序
       })
   },
	// 移除字段
	removeValueItem(item, index) {
  		this.form.value.splice(index, 1)
	},
	/* 下拉框change事件 */
	 sortChange(item) {
	  if (item.column !== '' && item.sortBy !== '') {
	    this.getTableList()
	  }
	},