vue+vuedraggable 实现表格行拖拽

最新推荐文章于 2024-04-17 14:08:59 发布

haoxinqing222

最新推荐文章于 2024-04-17 14:08:59 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/haoxinqing222/article/details/126834849

版权

vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

尝试使用sortable效果不太好，拖拽痕迹不太明显，所以使用draggable，主要是拖拽代码
在这里插入图片描述

<template>
<table width="1100px" v-show="submitForm.aaa==2" class="nature-table">
  <tr>
    <th style="width:30px">序号</th>
    <th style="min-width:150px">业务名称</th>
    <th style="min-width:150px">对接人</th>
    <th style="min-width:150px">部门</th>
    <th style="min-width:150px">联系方式</th>
    <th style="width:60px">操作</th>
  </tr>
  <draggable
      :list="submitForm.contactTable"
      animation="300"
      tag="tbody"
    >
    <tr v-for="(item, index) in submitForm.contactTable" :key="index">
      <td>{{index+1}}</td>
      <td>
        <el-form-item label-width="0px" label="" 
        :prop="'contactTable.'+index+'.ddd'" 
        :rules="{ required: true, message: '请选择业务名称', trigger: 'change' }">
          <el-select
            size="small"
            v-model="item.ddd"
            class="el-width-st100"
            placeholder="请选择业务名称"
            clearable
          >
            <el-option
              v-for="item in bussinessArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
      </td>
      <td>
        <el-form-item label-width="0px" label="" 
        :prop="'contactTable.'+index+'.eee'" 
        :rules="{ required: true, message: '请选择对接人', trigger: 'change' }">
          <el-select
            v-model="item.eee"
            filterable
            remote
            reserve-keyword
            placeholder="请输入后搜索对接人"
            size="small"
            :remote-method="remoteMethodUser"
            clearable
            class="el-width-st100"
            @change="val=>userChange(val,index)"
          >
            <el-option
              v-for="(item,index) in userList"
              :key="index"
              :label="item.name"
              :value="item.staffId"
            ></el-option>
          </el-select>
        </el-form-item>
      </td>
      <td>{{item.fff}}</td>
      <td>{{item.ggg}}</td>
      <td>
        <el-button v-show="submitForm.contactTable.length>1" type="text" size="small" class="button-two" @click="deleteOne(index)">删除</el-button>
      </td>
    </tr>
  </draggable>
</table>
</template>


import draggable from 'vuedraggable';
components:{
   draggable
},