element拖拽表单拖拽排序

bash 复制代码
    <el-button @click="addfirst()" type="text" class='el-icon-circle-plus-outline' ></el-button>

    <draggable
      v-model="myArray"
      group="people"
      @change="change"
      @start="start"
      @end="end"
    >
      <div class="item" v-for="(first, index) in myArray" :key="index">
        <!-- {{ index }} -->
        <el-input  style='width:20%'  clearable v-model.trim="first.name" placeholder="请输入"></el-input>
        <el-button type="text" class="el-icon-delete" style='width:4%'  @click.prevent="removefirst(first)"></el-button>

      </div>
    </draggable>

    <el-button class="searchBtn" @click="tijiao()" type="primary">提交</el-button>
bash 复制代码
   data() {
          return {
              myArray: [
	                {
	                  name:''
	                },
              ],
          }
    }
bash 复制代码
 // 删除1
  removefirst(item) {
        var index = this.myArray.indexOf(item)
        this.myArray.splice(index, 1)
    },
    addfirst(){
        this.myArray.push({
            name:'',
        });
    },
    tijiao(){
      console.log(this.myArray)
    },
   // 监听拖拽
  change(event) {
    // console.log("change");
    // console.log(event);
    // console.log(this.myArray);
  },
  // 开始拖拽
  start(event) {
    // console.log("start");
    // console.log(event);
    // console.log(this.myArray);
  },
  // 结束拖拽
  end(event) {
    // console.log("end");
    // // event.item  拖拽的本身
    // // event.to      拖拽的目标列表
    // // event.from    拖拽之前的列表
    // // event.oldIndex    拖拽前的位置
    // // event.newIndex    拖拽后的位置
    // console.log(event);
    // console.log(this.myArray);
  },
相关推荐
passer9811 分钟前
基于Vue的场景解决
前端·vue.js
用户458203153173 分钟前
CSS过渡(Transition)详解:创建平滑状态变化
前端·css
春秋半夏6 分钟前
本地项目一键开启 HTTPS(mkcert + Vite / Vue 配置教程)
前端
穿花云烛展21 分钟前
实习日记2(与form表单的爱恨情仇1)
前端
岛风风30 分钟前
分享一下Monorepo 的理解和不同类型项目的目录结构
前端
ITMan彪叔33 分钟前
Tesseract OCR 页面分割模式解析
前端
w_y_fan34 分钟前
Flutter中的沉浸式模式设置
前端·flutter
游荡de蝌蚪35 分钟前
快速打造Vue后台管理系统
前端·javascript·vue.js
code_YuJun36 分钟前
3. 修改 vue.config.js 配置完成打包分析和优化
前端
文心快码BaiduComate44 分钟前
轻松实践:用Python实现“名字大作战”游戏,表白Zulu!
前端·后端·微信小程序