vue动态表单拖拽（固定type）

新手村常驻居民

已于 2023-10-30 10:44:04 修改

阅读量814

点赞数

文章标签： vue.js 前端 javascript

于 2023-02-09 09:32:21 首次发布

本文链接：https://blog.csdn.net/xin_shou_cun/article/details/128946686

版权

这是一个简单的动态表单（不要在意代码的格式，毕竟这种格式会被大佬ma ，n），是通过自己的list直接定义好的输入框，日期框，下拉框，其余想使用单选，或者多选按钮可以自己尝试，
在这里插入图片描述

第一步先通过vue下载draggable

npm i vuedraggable -S

第二步在当前vue页面中注册组件draggable

第三步像我这样的菜鸟口可以看懂的代码可以自己通‘删除’和‘复原’了解代码

import draggable from “vuedraggable”;
export default {
name: “Login”,
//注册draggable组件
components: {
draggable,
},

<template xmlns="http://www.w3.org/1999/html">


  <div style="border: 1px solid red">
    <el-container style="height: 400px">
      <el-aside class="el-aside1" style="height: 400px" width="800px">
        <el-container>
          <el-header  class="col1"  width="80%"  height="400px" style="border: 1px solid royalblue">
      <!--     :forcaFallback 为true时拖动附加样式
            dragClass 目标推动过程中添加
            ghostClass 拖动中产生影子
            chosenClass 目标选中时添加
            -->
            <div class="col1-one">
           <draggable
             v-model="arr3"
             :group="name3"
             animation="300"
             :forceFallback="true"
             dragClass="dragClass"
             ghostClass="ghostClass"
             chosenClass="chosenClass"
             @add="onAdd"
             style="width: 100%; height: 80%; overflow-y: auto; display: block"
           >
             <div class="item3" v-for="item in arr3" :key="item.id">
               <span class="label" width="20%">{{ item.name }}</span>
               <el-input
                class="value"
                v-model="item.value"
                v-if="item.type ==='input'"
                placeholder="请输入内容"
                ></el-input>
               <el-date-picker
                class="value"
                v-if="item.type ==='date'"
                v-model="item.value"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00']"
               >
               </el-date-picker>
               <el-select
                 class="value"
                 v-if="item.type==='select'"
                 v-model="item.value">
                 <el-option
                   v-for="(i,index) in item.option"
                   :key="index"
                   :value="i.id"
                   :label="i.name"
                 >{{i.name}}</el-option>
                 </el-select>
             </div>
           </draggable>
            </div>
            <el-button size="small" type="primary"  @click="chaXun"
            >查询</el-button>
          </el-header>
        </el-container>
      </el-aside>
      <el-container style="height: 400px">
        <el-main  class="col2">
           <!--
           draggable:用于拖拽的组件
           v-model：用来实现表单和数据的双向绑定
           :group:用于分组，同一组的不同list可以相互拖拽
           animation：动画事件 单位ms
           dargClass:目标拖动过程中添加
           ghostClass:当拖动列表时会生成一个副本作为单元模拟拖动排序的情况，次配置就是影子单元加class
           chosenClass:目标被选中添加
           :forceFallback 如果设置为true时，将不适用原生的thml5的拖放，可以修改一些拖动中元素的样式等
           overflow-y:是否对上下边缘进行裁剪
           @add:添加但愿是的回调函数
           -->
           <draggable
            v-model="arr1"
           :group='name1'
            animation="300"
            dragClass="dragClass"
            ghostClass="ghostClass"
            chosenClass="chosenClass"
            :forceFallback="true"
            @add="onAdd"
            style="width:100%;height: 80%;"
            >
<!--   v-for:1数组，遍历数组时常见的方法，2对象数组，3对象，对象不同于数组，遍历大多数时关键字和值，即key和val，绥延对象也有索引值，一般用不到
     disabled:动态控制属性 定义是否次sortable对象是否可用-->
             <div class="item" v-for="item in arr1" :key="item.id">
               <span class="label">{{item.name}}</span>
               <el-input
                 class="value"
                 v-model="item.value"
                 disabled
                 v-if="item.type==='input'"
                 placeholder="请输入内容"
               ></el-input>
               <el-date-picker
               class="value"
               disabled
               v-if="item.type==='date'"
               v-model="item.value"
               type="datetimerange"
               start-placeholder="开始时间"
               end-placeholder="结束时间"
               value-format="yyyy-MM-dd HH:mm:ss"
               :default-time="['00:00:00']"
               ></el-date-picker>
               <el-select
               class="value"
               disabled
               v-if="item.type==='select'"
               v-model="item.value"
               type="select">
                 <el-option
                   v-for="(i,index) in item.option"
                   :key="i.index"
                   :value="i.id"
                   :label="i.name"
                 >{{i.name}}</el-option>
               ></el-select>
             </div>
           </draggable>

        </el-main>
      </el-container>
    </el-container>
<div>
  <el-table
    :data="tableData"
    style="width:100%;"
    :header-cell-style="{textAlign: 'center'}"
    :cell-style="{ textAlign: 'center' }"	>
    <el-table-column
      prop="datat"
      width="180px"
      label="日期">
    </el-table-column>
    <el-table-column
      prop="shuju_a"
      width="180px"
      label="测试">
    </el-table-column>
    <el-table-column
      prop="shuju_b"
      width="180px"
      label="测试">
    </el-table-column>
  </el-table>
</div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "Login",
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      tableData:[],
      name1:"a",
      name3:'a',
    shuJu:'',
      arr1:[
        {id:1,name:'测试',type:"input",value:''},
        {id:2,name:'时间',type:"date",value:''},
        {id:3,name:'时间',type:"select",value:'',option:[{id:'1',name:'张三'},{id:'2',name:'里斯'}]},
      ],

      arr3:[],
    }
  },

  methods: {

    chaXun() {
      let that=this;
      for(let i=0;i<this.arr3.length;i++){
        if(this.arr3[i].id=='1'){
          this.shuJu=this.arr3[i].value
        }
      };
      console.log(this.shuJu)
      if(that.arr3.length>0) {
        /*  @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)tiao'xiu
        最常用的使用请求体传参的无疑是POST请求了，所以使用@RequestBody接收数据时，一般都用POST方式进行提交*/
        this.$axios.post('http://localhost:8899/api/xun',{shuju_a:this.shuJu},{headers:{'Content-Type':"application/json"}}).then(resp => {
          that.tableData = resp.data
        }).catch(err => {
          console.log('操作失败' + err)
        })
      }else{
        alert('请拖拽参数')

      }
    },
    onAdd() {
    },
  }
}
</script>



<style scoped>
/*!*!important，作用是提高指定样式规则的应用优先权（优先级）*!
!*当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待*!
*/



.col1 .item{
  padding: 6px 12px !important;
  margin: 0px 10px 0px 0px !important;
  width: 30% !important;

  display: inline-block !important;
}
.col1 .item .label{
  width: 50px;
  margin-right: 10px !important;
  display: inline !important;
}
/deep/.col1 .item .label .value{
  width: 40% !important;
  height: 20px;
}

col1{
  width: 100%;
  height: 100%;
  flex: 1;
  padding: 10%;
  border-radius: 5px;
  float: left;
}
.col1-one{
  height: 350px;
}
.col2{
  background-color: #B3C0D1;
  color: #333;
  width: 300px;
  height: 100%;
  flex: 1;
  float: left;
}
.col +col{
  margin-left: 10px;
}
.item3 .label {
  margin-right: 10px;
  display: inline-block;/*改变元素的height wdith*/
  width: 20%;
  text-align: center;


}
.item3 .value {
  width: 60%;
}
.item .label {
  text-align: center;
  width: 20%;
  margin-right: 10px;
  display: inline-block;
}
.item .value {
  width: 70%;
}
.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}
.item + .item {
  border-top: none;
  margin-top: 6px;
}
.el-aside1 {
  background-color: #E9EEF3;
  color: #333;
  height: 800px;
}





</style>