效果圖：
思路：
重點在于：拖動行到某一位置，拿到這一位置的標識，數(shù)據(jù)插入進這個位置 vueuse的拖拽hooks useDraggable 可以用；html5 drag能拖動行元素；mounsedown、mounsemove時間實現(xiàn)拖拽
頁面html表格代碼
<el-table
:data="columnModelList"
height="calc(100% - 40px)"
stripe
border
style="width: 100%">
<!-- 通過自定義圖標去拖動 -->
<el-table-column
header-align="center"
type="index"
align="center"
label=""
:width="60"
>
<template #default="{ row, $index }">
<span
:class="filedInfoClass['drag-table-item'] + '-' + $index"
@mousedown="dragHandle.dragStart(row, $index, filedInfoClass)"
>
<img style="cursor: move;width: 30px;height: 30px;" th:src="@{/manager/assets/images/drag_icon.svg}">
</span>
</template>
</el-table-column>
<el-table-column
prop="title"
label="標題"
show-overflow-tooltip
min-width="192">
</el-table-column>
<el-table-column
prop="productType"
label="產(chǎn)品類型"
show-overflow-tooltip
width="95">
</el-table-column>
<el-table-column
prop="productName"
width="243"
show-overflow-tooltip
label="產(chǎn)品名稱">
</el-table-column>
<el-table-column
prop="version"
label="版本號"
show-overflow-tooltip
width="114">
</el-table-column>
<el-table-column
prop="updateType"
label="版本更新類型"
show-overflow-tooltip
width="140">
<template slot-scope="scope">
{{ showText(scope.row) }}
</template>
</el-table-column>
<el-table-column
prop="introduction"
show-overflow-tooltip
width="263"
label="簡述">
</el-table-column>
<el-table-column
prop="issueDate"
show-overflow-tooltip
width="206"
label="發(fā)布時間">
<template slot-scope="scope">
<span>{{ scope.row.issueDate && ![0, 2, 3].includes(scope.row.status * 1) ? getIssueDate(scope.row.issueDate) : '/' }}</span>
</template>
</el-table-column>
<el-table-column
prop="status"
show-overflow-tooltip
width="100"
label="狀態(tài)">
<template slot-scope="scope">
<div style="text-align: center;height: 32px;line-height: 32px;">
<span style="color: #262626;background: #EBEDF0;border: 1px solid rgba(102,102,102,0.06);" v-if="scope.row.status * 1 === 0" class="status-box">草稿</span>
<span style="color: #F47D06;background: #FEF4EB;border: 1px solid rgba(244,125,6,0.06);" v-else-if="scope.row.status * 1 === 2" class="status-box">待審核</span>
<span style="color: #E20000;background: #FEEBEB;border: 1px solid rgba(226,0,0,0.06);" v-else-if="scope.row.status * 1 === 3" class="status-box">退回</span>
<span style="color: #E20000;background: #FEEBEB;border: 1px solid rgba(226,0,0,0.06);" v-else-if="scope.row.status * 1 === 4" class="status-box">待發(fā)布</span>
<span style="color: #262626;background: #EBEDF0;border: 1px solid rgba(102,102,102,0.06);" v-else-if="scope.row.status * 1 === 1" class="status-box">已發(fā)布</span>
<span style="color: #E20000;background: #FEEBEB;border: 1px solid rgba(226,0,0,0.06);" v-else="scope.row.status * 1 === 5" class="status-box">已刪除</span>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="60">
<template slot-scope="scope">
<div class="table-button" @click="handleViews(scope.row)">
查看
</div>
</template>
</el-table-column>
</el-table>
在 template 模版中 定義mousedown方法，表示開始拖拽，并拿到記錄拖拽元素標識信息
拖拽時采用原生js獲取行維度數(shù)據(jù)，設(shè)置 effectAllowed = ‘move’ 表示每行都可以放置
拖動到每一行上時拿到行標識，并動態(tài)插入交換表格數(shù)據(jù)，vue通過 diff算法分析，dom變動實現(xiàn)拖動效果
放置時拿到拖動行id ，目標行 id 請求數(shù)據(jù)，動態(tài)刷新表格數(shù)據(jù)
在created里面定義拖動方法
const that = this
that.dragHandle = {
// 開始拖拽
dragStart(row, i, filedInfoClass) {
const dataSetDetail = []
let dragI = i; // 拖拽起點
// 采用原生 js 獲取 第 i 行
const con = document.querySelector(
`.el-table__body .row-class-${i}`
)
const tbody = document.querySelector(
`.el-table__body tbody`
)
let tr = document.querySelectorAll(
`.el-table__body tbody tr`
);
const dragKey = row.gid; // 拖拽的元素標識
if (con) {
con.setAttribute('draggable', 'true');
con.ondragstart = (ev) => {
console.log('start', ev);
}
};
// 設(shè)置 effectAllowed = 'move' 表示每行都可以放置
tbody.ondragover = (ev) => {
if (ev.dataTransfer) {
ev.dataTransfer.effectAllowed = 'move';
}
ev.preventDefault();
};
tbody.ondragenter = (ev) => {
if (ev.dataTransfer) {
ev.dataTransfer.effectAllowed = 'move';
}
ev.preventDefault();
};
tr.forEach((el, n) => {
el.ondragover = that.debounce(
() => {
// dataSetDetail.value?.columnModelList 表格數(shù)據(jù)
const item = that.columnModelList[dragI]
// n 移動到 第 n 個
// i 從 第 i 個
if (n > dragI) {
that.columnModelList.splice(n + 1, 0, item);
that.columnModelList.splice(dragI, 1);
} else if (n < dragI) {
const start = n - 1 < 0 ? 0 : n;
that.columnModelList.splice(start, 0, item);
that.columnModelList.splice(dragI + 1, 1);
}
dragI = n;
},500,that);
});
tr = document.querySelectorAll(
`.${filedInfoClass['field-info-container']} tbody tr`
);
tr.forEach((el) => {
el.ondragend = () => {
const columns = that.columnModelList || [];
const beforeI =
dragI + 1 >= columns.length ? -1 : dragI + 1;
const columnId = columns[dragI].resourceId || '';
const beforeColumnId = columns[beforeI]?.resourceId || null;
};
})
}
}
在data中定義樣式對象
filedInfoClass: {
'field-info-container': 'field-info-container',
'drag-table-item': 'row-class'
},
columnModelList是定義在data中的表格數(shù)據(jù)文章來源：http://www.zghlxwxcb.cn/news/detail-829980.html
可以做到拖動一個就掉接口，我這里是拖動完，點保存才將數(shù)據(jù)傳給后臺。，掉接口文章來源地址http://www.zghlxwxcb.cn/news/detail-829980.html
到了這里，關(guān)于element ui表格手寫拖動排序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
