vue+elementui表格拖拽

最新推荐文章于 2024-08-29 17:15:26 发布

my小新

最新推荐文章于 2024-08-29 17:15:26 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： vue

原文链接：https://www.cnblogs.com/lemoncool/p/11661084.html

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先安装：npm install sortablejs --save

代码：

<template>

  <div class="hibe">

    <el-table :data="tableData" row-key="id">

      <el-table-column

        v-for="(item, index) in col"

        :key="`col_${index}`"

        :prop="dropCol[index].prop"

        :label="item.label"

      ></el-table-column>

    </el-table>

  </div>

</template>

<script>

    import Sortable from 'sortablejs';



    export default {

        data () {

            return {

                col:[
                      {label: '日期', prop: 'date'}, 
                      {label: '姓名',  prop: 'name'}, 
                      {label: '地址', prop: 'address'}
                    ],

                dropCol:[
                            {label: '日期',  prop: 'date'},  
                            {label: '姓名', prop: 'name'}, 
                            {label: '地址', prop: 'address'}
                        ],

               tableData: [

                    {

                        id: '1',

                        date: '2016-05-02',

                        name: '王小虎1',

                        address: '上海市普陀区金沙江路 100 弄'

                    },

                    {

                        id: '2',

                        date: '2016-05-04',

                        name: '王小虎2',

                        address: '上海市普陀区金沙江路 200 弄'

                    },

                    {

                        id: '3',

                        date: '2016-05-01',

                        name: '王小虎3',

                        address: '上海市普陀区金沙江路 300 弄'

                    },

                    {

                        id: '4',

                        date: '2016-05-03',

                        name: '王小虎4',

                        address: '上海市普陀区金沙江路 400 弄'

                    }

                ]

            };

        },

        mounted () {

            this.rowDrop();

            this.columnDrop();

        },

        methods: {

            // 行拖拽

            rowDrop () {

               // 此时找到的元素是要拖拽元素的父容器

                const tbody = document.querySelector('.hibe .el-table__body-wrapper tbody');

                console.log(tbody)

                const _this = this;

                Sortable.create(tbody, {

           //  指定父元素下可被拖拽的子元素

                  draggable: ".hibe .el-table__row",

                   onEnd ({ newIndex, oldIndex }) {

                        const currRow = _this.tableData.splice(oldIndex, 1)[0];

                        _this.tableData.splice(newIndex, 0, currRow);

                    }

                });

            },

            // 列拖拽

            columnDrop () {

                const wrapperTr = document.querySelector('.hibe .el-table__header-wrapper tr');

                this.sortable = Sortable.create(wrapperTr, {

                    animation: 180,

                    delay: 0,

                    onEnd: evt => {

                        const oldItem = this.dropCol[evt.oldIndex];

                        this.dropCol.splice(evt.oldIndex, 1);

                        this.dropCol.splice(evt.newIndex, 0, oldItem);

                    }

                });

            }

        }

    };

</script>