Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能完整代碼
更新時間：2024年05月11日 10:53:34 作者：Vue安夏
在vue3+elementPlus網(wǎng)站開發(fā)中,詳細(xì)完成el-table表格的鼠標(biāo)拖拽/拖曳/拖動排序,下面這篇文章主要給大家介紹了關(guān)于Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能的相關(guān)資料,需要的朋友可以參考下
一： 安裝sortablejs
npm install sortablejs --save
二： 頁面使用
這里項(xiàng)目只需要一個地方用到，就沒有封裝成組件，直接在用到的.vue文件中寫了。
在使用的 .Vue 文件中導(dǎo)入
import { default as Sortable, SortableEvent } from "sortablejs";看下圖：
注意事項(xiàng)：el-table需要配置 row-key 且保持唯一性，不然會出現(xiàn)排序不對的情況
rowDrag方法：
// 行拖拽
const rowDrag = function () {
// 要拖拽元素的父容器
const tbody = document.querySelector(
".draggable .el-table__body-wrapper tbody"
);
if (!tbody) return;
Sortable.create(tbody as HTMLElement, {
// 可被拖拽的子元素
draggable: ".draggable .el-table__row",
onEnd(event: SortableEvent) {
if (event.oldIndex !== undefined && event.newIndex !== undefined) {
const currRow = tableList.splice(event.oldIndex, 1)[0];
tableList.splice(event.newIndex, 0, currRow);
}
},
});
};效果如下：
圖標(biāo)不能使用，自己可以更換了，這個無所謂啦。
三 ： 下面是封裝成組件使用
還不夠完善，可以根據(jù)自己的需求進(jìn)行修改。
dragTable 組件代碼如下：
<template>
<div class="t-table" ref="table_ref">
<el-table
class="draggable"
ref="tables"
:data="state.tableData"
row-key="id"
border
fit
highlight-current-row
style="width: 100%"
>
<!-- 拖拽 -->
<el-table-column align="center" label="" width="80">
<template #default="{}">
<i-ep-fold style="cursor: move" />
</template>
</el-table-column>
<template v-for="item in state.tableHeaders" :key="item.id">
<el-table-column
:property="item.property"
:min-width="item.width"
align="center"
show-overflow-tooltip
>
<template #header>
<p style="margin: 0; display: flex; justify-content: center">
{{ item.label }}
</p>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script setup lang="ts" name="dragTable">
import { ref, watch, reactive, onMounted } from "vue";
import { default as Sortable, SortableEvent } from "sortablejs";
const props = defineProps<{
// 列表數(shù)據(jù)
table: any;
// 表頭數(shù)據(jù)
headers: {
id: string;
property: string;
width: string;
label: string;
show: boolean;
}[];
}>();
// 初始化數(shù)據(jù)
const state = reactive({
tableData: props.table,
tableHeaders: props.headers,
});
// 獲取el-table ref
const tables: any = ref<HTMLElement | null>(null);
// 獲取t-table ref
const table_ref: any = ref<HTMLElement | null>(null);
// 拋出事件 在 應(yīng)用的.Vue 文件做相應(yīng)的操作
const emits = defineEmits(["rowSort"]);
// 監(jiān)聽移動的 表格數(shù)據(jù) 重新賦值
watch(
() => props.table,
(val) => {
console.log("watch val", val);
state.tableData = val;
},
{ deep: true }
);
onMounted(() => {
console.log("state.tableData >>>", state.tableData);
console.log("state.tableHeaders >>>", state.tableHeaders);
initSort();
});
// 行拖拽
const initSort = () => {
const el = table_ref.value.querySelector(".el-table__body-wrapper tbody");
// console.log('3333', el)
Sortable.create(el, {
animation: 150, // 動畫
onEnd: (event: SortableEvent) => {
if (event.oldIndex !== undefined && event.newIndex !== undefined) {
const curRow = state.tableData.splice(event.oldIndex, 1)[0];
state.tableData.splice(event.newIndex, 0, curRow);
emits("rowSort", state.tableData);
}
},
});
};
</script>
在 .Vue 文件中的使用 及 頁面父傳子的數(shù)據(jù)
1. 導(dǎo)入組件
import dragTable from "@/components/DragTable/index.vue";
2. 使用組件
<dragTable :table="tableList" :headers="initialHeaders" @rowSort="handleRowSort" />
3. 在 .Vue 文件里的數(shù)據(jù)及方法
列表數(shù)據(jù)就根據(jù)自己后端返回的數(shù)據(jù)直接傳遞就行。
表頭數(shù)據(jù)如下：
let initialHeaders = reactive([
{
id: "1",
property: "id",
width: "88",
label: "ID",
show: true,
},
{
id: "2",
property: "name",
width: "121",
label: "111",
show: true,
},
{
id: "3",
property: "thumb",
width: "139",
label: "222",
show: true,
},
{
id: "4",
property: "icon",
width: "99",
label: "333",
show: true,
},
]);handleRowSort() 這個事件每次更改列表的排序就會觸發(fā)，在使用組件的 .Vue 文件上就能進(jìn)行一些相應(yīng)的需求操作
const handleRowSort = () => {
console.log("應(yīng)用的.Vue 文件做相應(yīng)的操作");
};組件使用的效果圖如下：
樣式可以根據(jù)自己需求進(jìn)行調(diào)整，這個小問題啦，功能實(shí)現(xiàn)就好。
總結(jié)
到此這篇關(guān)于Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能的文章就介紹到這了,更多相關(guān)Vue3+El-Plus表格行拖拽功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 使用 echarts 繪制中國地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 使用 echarts 繪制中國地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue-cli3設(shè)置代理無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)）
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。接下來給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)的相關(guān)知識，非常不錯，感興趣的朋友一起看看吧2016-09-09
Luckysheet?在vue中離線使用及引入報錯的解決方案(推薦)
這篇文章主要介紹了Luckysheet?在vue中離線使用方法及引入報錯的解決方案,將dist離線包在項(xiàng)目創(chuàng)建個文件夾放著，然后根據(jù)放置的位置在?index.html里面引入，下面通過案例給大家介紹我的項(xiàng)目里面放置的位置，需要的朋友可以參考下2022-10-10
vite是一個由vue作者尤雨溪專門為vue打造的開發(fā)利器,其目的是使 vue項(xiàng)目的開發(fā)更加簡單和快速,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3+Vite中使用JSX的相關(guān)資料,需要的朋友可以參考下2023-02-02
JavaScript之實(shí)現(xiàn)一個簡單的Vue示例
這篇文章主要介紹了JavaScript之實(shí)現(xiàn)一個簡單的Vue示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue3?中路由Vue?Router?的使用實(shí)例詳解
vue-router是vue.js官方給出的路由解決方案，能夠輕松的管理SPA項(xiàng)目中組件的切換，這篇文章主要介紹了Vue3?中路由Vue?Router?的使用,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue混入mixins滾動觸底的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue打包c(diǎn)hunk-vendors.js文件過大導(dǎo)致頁面加載緩慢的解決
這篇文章主要介紹了vue打包c(diǎn)hunk-vendors.js文件過大導(dǎo)致頁面加載緩慢的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3實(shí)現(xiàn)Message消息組件示例
在大多數(shù) web 產(chǎn)品中，全局的 Message 組件占有較大的使用場景，本文主要介紹了Vue3實(shí)現(xiàn)Message消息組件示例，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06