vue实现表格拖拽并且可编辑

逃离我推掉我的手 2021-08-28 01:28 1268阅读 1赞

1使用vuedragger

第一步安装 vuedragger

npm install vuedraggable --save   或者 npm i -S vuedraggable

第二步 组件中引用

import draggable from "vuedraggable"

第三步 初始化组件

components: \{

draggable,

第四步 附上关键代码

<td>\{ \{index+1\}\}</td>

<td>\{ \{item.wp\_wordname\}\}</td>

<td>\{ \{item.wp\_pdfpage\}\}</td>

<td>

<el-button type="text" @click="onPreview(item.wp\_pdfpath)">预览</el-button>

<el-button type="text" @click="onDownLoad(item.wp\_pdfpath,item.wp\_wordsname)">下载

</el-button>

<el-button type="text" @click="onDelete(index,item)">删除</el-button>

</td>

</tr>

</draggable>

//拖动中与拖动结束

getdata(evt) \{

// console.log(evt.draggedContext.element.id);

\},

datadragEnd(evt) \{

/\* console.log("拖动前的索引 :" + evt.oldIndex);

console.log("拖动后的索引 :" + evt.newIndex);

console.log(this.tags); \*/

\},

第五步 重启服务

附上完整代码

<template>
        <div class="page-body" v-loading="loading" style="margin: 30px auto 0;
        padding: 0 36px 0 24px;">
          
              
                <table id="dataTable" cellspacing=0 cellpadding=0>
                    <thead>
                        <tr style="background:#047bcf">
                            <th width="110">序号</th>
                            <th width="200">文件编号</th>
                            <th width="200">责任者</th>
                            <th width="200">材料名称</th>
                            <th width="160">页数</th>
                            <th width="160">备注</th>
                            <th width="160">时间</th>
                            <th width="160">操作</th>
                            <th width="160">移动</th>
                        </tr>
                    </thead>
                    <draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
                        <tr v-for="(item,index) in tablelist" :key="index">
                          <td>{
       {index+1}}</td>
                            <td><el-input v-model="tablelist[index].st_failNum"></el-input></td>
                            <td><el-input v-model="tablelist[index].st_chargePeople" ></el-input></td>
                            <td>{
       {item.wp_wordname}}</td>
                            <td>{
       {item.wp_pdfpage}}</td>
                            <td><el-input v-model="tablelist[index].st_note" ></el-input></td>
                             <td> <el-date-picker
                                v-model="tablelist[index].st_date"
                                type="date"
                                placeholder="选择日期"                        
                                value-format="yyyyMMdd">
                              </el-date-picker></td> 
                            <td>
     <td>
                                <el-button type="text" @click="onPreview(item.wp_pdfpath)">预览</el-button>
                                <el-button type="text" @click="onDownLoad(item.wp_pdfpath,item.wp_wordsname)">下载
                                </el-button>
                                <el-button type="text" @click="onDelete(index,item)">删除</el-button>
                            </td>
                            <td><i class="el-icon-sort"></i></td>
                        </tr>
                    </draggable>
                </table>
          
           
        </div>
    </template>
    <script>
        import draggable from "vuedraggable";
        import axios from "axios"
        export default {
            data() {
                return {
                    tablelist: [],
                }
            },
        mounted(){
        this.onGetTableList()
        },
    
    
            methods: {
               
    
                //拖动中与拖动结束       
                getdata(evt) {
                    // console.log(evt.draggedContext.element.id);
                },
                datadragEnd(evt) {
                    /*   console.log("拖动前的索引 :" + evt.oldIndex);
                      console.log("拖动后的索引 :" + evt.newIndex);
                      console.log(this.tags); */
                },
             
              
                onGetTableList() {
                 axios("url",params)
                        .then(response => {
                            if (response.status == 200) {
                                if (response.data.code == 200) {
                                    let tempData = response.data;
                                    if (tempData.data) {
    
                                        this.tablelist = tempData.data;
                                     
                                    }
                                } else {
                                    this.$message.error("错误信息：" + response.data.message);
                                }
                            } else {
                                this.$message.error("请求失败：" + response.status);
                            }
                        })
                        .catch(error => {
                            //console.log(error);
                            this.$message.error("异常信息：" + error);
                        })
                },
              //假删除
              onDelete(index, item) {
                    this.tablelist.splice(index, 1)
    
                },
               
    
            },
            components: {
                draggable,
    
            }
        }
    
    </script>
    <style scoped>
       
    </style>