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()
        },
相关推荐
半点寒12W2 分钟前
uniapp全局状态管理实现方案
前端
Vertira3 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL37 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949701 小时前
Vue响应式原理推导过程
vue.js·响应式设计
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端
巴别塔的饿灵1 小时前
Webpack[TBC]
前端