JZTXT

a-table(AntDesign Vue)实现表格行上下拖动排序

发布时间 2023-12-07 14:50:18作者: Felix_Openmind

参考链接：

  1. https://blog.csdn.net/song_de/article/details/125218350
  2. https://blog.csdn.net/m0_61342618/article/details/132556739?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1-132556739-blog-125218350.235v39pc_relevant_3m_sort_dl_base2&spm=1001.2101.3001.4242.2&utm_relevant_index=4

                    <a-table
                            class="api-ant-table"
                            rowKey="itemId"
                            :scroll="{ x: true, y: true }"
                            :columns="columns"
                            :data-source="dicitemList"
                            :pagination="false"
                            :row-selection="{
                                selectedRowKeys: selectedRowKeys,
                                onChange: onSelectChange,
                                }"
                            :loading="loading"
                            :customRow="customRow"

                    >
                    <a-table/>
data() {
  return {
            dicitemList: [],
            sourceObj: null, // 原对象
            targetObj: null, // 目标对象
  }
},
methods: {
          customRow(record, index) {
            console.log(record, index);
            return {
                style: {
                    cursor: "move",
                },
                // 鼠标移入
                onMouseenter: (event) => {
                    // 兼容IE
                    var ev = event || window.event;
                    ev.target.draggable = true;
                },
                // 开始拖拽
                onDragstart: (event) => {
                    // 兼容IE
                    var ev = event || window.event;
                    // 阻止冒泡
                    ev.stopPropagation();
                    // 得到源目标数据
                    this.sourceObj = record;
                },
                // 拖动元素经过的元素
                onDragover: (event) => {
                    // 兼容 IE
                    var ev = event || window.event;
                    // 阻止默认行为
                    ev.preventDefault();
                },
                // 鼠标松开
                onDrop: (event) => {
                    // 兼容IE
                    var ev = event || window.event;
                    // 阻止冒泡
                    ev.stopPropagation();
                    // 得到目标数据
                    this.targetObj = record;
                    console.log(this.sourceObj, this.targetObj);
                    const tempDta = this.dicitemList;
                    tempDta[this.targetObj.weight] = this.sourceObj;
                    tempDta[this.sourceObj.weight] = this.targetObj;
                    let weightList = [];
                    tempDta.forEach((item, index) => {
                        item.weight = index;
                        weightList.push({
                            id: item.id,
                            weight: index,
                        });
                    });
                    // this.handleWeightModify(weightList);// 更改顺序接口
                },
            };
        },

}