文章來源地址http://www.zghlxwxcb.cn/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', '');
                        },
                        // 監(jiān)聽拖拽事件結(jié)束時(shí)觸發(fā)
                        onEnd: evt => {
                            // 拖動(dòng)行的前一行
                            const targetRow = this.statisticsChexkboxs.splice(evt.oldIndex, 1)[0];
                            // 拖動(dòng)行的后一行
                            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)
                })
            },
   }

 // 我這個(gè)是在彈筐里寫的 $refs.獲取不到可以寫這個(gè)里  正常情況放mounted調(diào)用就行
        updated() {
            this.setSort()
        },

到了這里，關(guān)于element+vue table上移+下移 拖拽的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！