element ui表格el-table列表拖拽

最新推荐文章于 2024-02-23 16:21:32 发布

小白兔12345678

最新推荐文章于 2024-02-23 16:21:32 发布

阅读量478

点赞数 1

分类专栏： elementui 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/m0_58373910/article/details/125048031

版权

elementui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏





click(){
    this.$nextTick(() => {
        this.setSort(); //表格拖拽
    });
}
setSort() {
            if (this.$refs.questionMultipleTable != undefined) {
                const el = this.$refs.questionMultipleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];

                this.sortable = Sortable.create(el, {
                    ghostClass: 'sortable-ghost',
                    setData: function (dataTransfer) {
                        dataTransfer.setData('Text', '');
                    },
                    onEnd: (evt) => {
                        const targetRow = this.questionTableData.splice(evt.oldIndex, 1)[0];
                        this.questionTableData.splice(evt.newIndex, 0, targetRow);
                    }
                });
            }
        },

el-table加上ref:

<el-table
border
ref="questionMultipleTable"
:data="questionTableData"
tooltip-effect="dark"
style="width: 100%"
height="350"
highlight-current-row
row-key="questId"
@selection-change="handleSelectPaperChange"
>xxxx</el-table>