element+vue table上移+下移 拖拽

javascript 复制代码
//安装
npm install sortablejs --save
javascript 复制代码
  <el-table :data="statisticsChexkboxs" border max-height="300px" width="740px" row-key="id"
                    ref="projectTable">
                    <el-table-column v-for="item in confirmHead" :key="item.label" :label="item.label" :prop="item.prop"
                        :width="item.width" align="center" show-overflow-tooltip>
                    <el-table-column label="操作" fixed="right" width="200" align="center">
                        <template slot-scope="scope">
                            <el-link type="info" icon="el-icon-top" style="margin-right: 8px" :underline="false"
                                @click="handleUp(scope.row, scope.$index)">上移
                                <el-divider direction="vertical"></el-divider>
                            </el-link>
                            <el-link type="info" icon="el-icon-bottom" style="margin-right: 8px" :underline="false"
                                @click="handleDown(scope.row, scope.$index)">下移
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>

//在需要编写排序的页面引入sortablejs依赖
   import Sortable from 'sortablejs';
     data() {
     return {
        sortable: null,
        orderSort: false,
        data: [],
        }
     }
   methods:{
    // 上移
            handleUp(item, index) {
                this.statisticsChexkboxs.splice(index - 1, 0, item);
                this.statisticsChexkboxs.splice(index + 1, 1);
                 this.handleOrderTable(this.statisticsChexkboxs)
            },
            // 下移
            handleDown(item, index) {
                this.statisticsChexkboxs.splice(index + 2, 0, item);
                this.statisticsChexkboxs.splice(index, 1);
                 this.handleOrderTable(this.statisticsChexkboxs)
            },
            //拖拽行
            setSort() {
                this.$nextTick(() => {
                //projectTable需要上面表格ref一致
                    const el = this.$refs.projectTable.$el.querySelectorAll(
                        '.el-table__body-wrapper > table > tbody'
                    )[0];
                    this.sortable = Sortable.create(el, {
                        animation: 150,
                        setData: function (dataTransfer) {
                            dataTransfer.setData('Text', '');
                        },
                        // 监听拖拽事件结束时触发
                        onEnd: evt => {
                            // 拖动行的前一行
                            const targetRow = this.statisticsChexkboxs.splice(evt.oldIndex, 1)[0];
                            // 拖动行的后一行
                            this.statisticsChexkboxs.splice(evt.newIndex, 0, targetRow);
                           this.handleOrderTable(this.statisticsChexkboxs)
                        }
                    });
                })
            },
              //保存表格顺序
            handleOrderTable(value) {
                let vaueData = value.map((item) => {
                    return {
                        detailId: item.id,
                        shipOrder: item.shipOrder,
                    };
                });
                dxjTransportAdjustShipOrder(vaueData).then((res) => {
                    const { code, msg } = res.data
                    const title = code === 200 ? '操作成功' : '操作失败'
                    const type = code === 200 ? 'success' : 'error'
                    this.$notification(title, type, msg)
                })
            },
   }

 // 我这个是在弹筐里写的 $refs.获取不到可以写这个里  正常情况放mounted调用就行
        updated() {
            this.setSort()
        },
相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode13 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript