element+vue table上移+下移 拖拽

这篇具有很好参考价值的文章主要介绍了element+vue table上移+下移 拖拽。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element+vue table上移+下移 拖拽,element,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-709540.html

//安装
npm install sortablejs --save
  <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()
        },

到了这里,关于element+vue table上移+下移 拖拽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包