快捷導(dǎo)航

vue 使用 sortable 實現(xiàn) el-table 拖拽排序功能

更新時間：2020年12月26日 13:41:04 作者：干飯第一名

這篇文章主要介紹了vue 使用 sortable 實現(xiàn) el-table 拖拽排序功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

本文給大家介紹vue 使用 sortable 實現(xiàn) el-table 拖拽排序功能，具體內(nèi)容如下所示：

npm 下載：

npm install sortablejs --save

引入：

import Sortable from "sortablejs";

代碼：

<template>
 <div class="table">
 <el-table ref="dragTable" :data="tableData" border :row-class-name="tableRowClassName">
 <el-table-column prop="date" label="日期"></el-table-column>
 <el-table-column prop="name" label="姓名"></el-table-column>
 <el-table-column prop="address" label="地址"></el-table-column>
 <el-table-column label="操作">
 <template>
 <el-button class="move" type="text" size="small">拖 拽</el-button>
 </template>
 </el-table-column>
 </el-table>
 </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
 data() {
 return {
 tableData: [
 {
 id: "1",
 name: "text_1",
 date: "1111-11-11",
 address: "測試_1",
 },
 {
 id: "2",
 name: "text_2_不可拖拽",
 date: "2222-22-22",
 address: "測試_2_不可拖拽",
 disabled: true,
 },
 {
 id: "3",
 name: "text_3",
 date: "3333-33-33",
 address: "測試_3",
 },
 {
 id: "4",
 name: "text_4",
 date: "4444-44-44",
 address: "測試_4",
 },
 {
 id: "5",
 name: "text_5",
 date: "5555-55-55",
 address: "測試_5",
 },
 ],
 };
 },
 methods: {
 // 創(chuàng)建sortable實例
 initSortable() {
 // 獲取表格row的父節(jié)點
 const ele = this.$refs.dragTable.$el.querySelector(
 ".el-table__body > tbody"
 );
 // 創(chuàng)建拖拽實例
 let dragTable = Sortable.create(ele, {
 animation: 150, //動畫
 handle: ".move", //指定拖拽目標(biāo)，點擊此目標(biāo)才可拖拽元素(此例中設(shè)置操作按鈕拖拽)
 filter: ".disabled", //指定不可拖動的類名（el-table中可通過row-class-name設(shè)置行的class）
 dragClass: "dragClass", //設(shè)置拖拽樣式類名
 ghostClass: "ghostClass", //設(shè)置拖拽?？繕邮筋惷?
 chosenClass: "chosenClass", //設(shè)置選中樣式類名
 // 開始拖動事件
 onStart: () => {
 console.log("開始拖動");
 },
 // 結(jié)束拖動事件
 onEnd: (e) => {
 console.log(
 "結(jié)束拖動",
 `拖動前索引${e.oldIndex}---拖動后索引${e.newIndex}`
 );
 },
 });
 },
 // 設(shè)置表格row的class
 tableRowClassName({ row }) {
 if (row.disabled) {
 return "disabled";
 }
 return "";
 },
 },
 mounted() {
 this.initSortable();
 },
};
</script>
<style lang='scss'>
// 拖拽
.dragClass {
 background: rgba($color: #41c21a, $alpha: 0.5) !important;
}
// ?？?
.ghostClass {
 background: rgba($color: #6cacf5, $alpha: 0.5) !important;
}
// 選擇
.chosenClass:hover > td {
 background: rgba($color: #f56c6c, $alpha: 0.5) !important;
}
</style>

到此這篇關(guān)于vue 使用 sortable 實現(xiàn) el-table 拖拽排序功能的文章就介紹到這了,更多相關(guān)vue實現(xiàn) el-table 拖拽排序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: