vue实现表格拖拽并且可编辑-蒲公英云

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

1使用vuedragger

第一步安装 vuedragger

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

第二步组件中引用

import draggable from “vuedraggable”

第三步初始化组件

components: {

draggable,

}

第四步附上关键代码

{ {index+1}}

{ {item.wp_wordname}}

{ {item.wp_pdfpage}}

预览

下载

删除

//拖动中与拖动结束

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>