vue+element-ui+sortable.js實現(xiàn)表格拖拽功能

更新時間：2022年04月13日 09:52:58 作者：麥兜:)

這篇文章主要為大家詳細介紹了vue+element-ui+sortable.js實現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+element-ui+sortable.js實現(xiàn)表格拖拽的具體代碼，供大家參考，具體內(nèi)容如下

效果如下:

1.vue使用cli創(chuàng)建項目就不說了,本人使用的是cli3.x版本

2.下載element-ui

npm i element-ui -S

3.引入element-ui,找到main.js,加入如下代碼

// 導入element-ui,和全局使用element-ui樣式
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

// 使用 ElementUI 組件庫
Vue.use(ElementUI);

4.下載sortablejs,官網(wǎng)為http://www.sortablejs.com/index.html,可在里面看你需要的效果(配置項)

npm install sortablejs --save

5.效果圖的全部代碼

<template>
? <div style="width:800px">
? ? <el-table :data="tableData" border row-key="id" align="left">
? ? ? <el-table-column
? ? ? ? v-for="(item, index) in col"
? ? ? ? :key="`col_${index}`"
? ? ? ? :prop="dropCol[index].prop"
? ? ? ? :label="item.label"
? ? ? >
? ? ? </el-table-column>
? ? </el-table>
? ? <!-- pre:json數(shù)據(jù)格式化展示 -->
? ? <pre style="text-align: left">
? ? ? {{ dropCol }}
? ? </pre>
? ? <hr />
? ? <pre style="text-align: left">
? ? ? {{ tableData }}
? ? </pre>
? </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
? data() {
? ? return {
? ? ? col: [
? ? ? ? {
? ? ? ? ? label: "日期",
? ? ? ? ? prop: "date"
? ? ? ? },
? ? ? ? {
? ? ? ? ? label: "姓名",
? ? ? ? ? prop: "name"
? ? ? ? },
? ? ? ? {
? ? ? ? ? label: "地址",
? ? ? ? ? prop: "address"
? ? ? ? }
? ? ? ],
? ? ? dropCol: [
? ? ? ? {
? ? ? ? ? label: "日期",
? ? ? ? ? prop: "date"
? ? ? ? },
? ? ? ? {
? ? ? ? ? label: "姓名",
? ? ? ? ? prop: "name"
? ? ? ? },
? ? ? ? {
? ? ? ? ? label: "地址",
? ? ? ? ? prop: "address"
? ? ? ? }
? ? ? ],
? ? ? tableData: [
? ? ? ? {
? ? ? ? ? id: "1",
? ? ? ? ? date: "2019-12-23",
? ? ? ? ? name: "王小虎1",
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 100 弄"
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "2",
? ? ? ? ? date: "2019-12-22",
? ? ? ? ? name: "王小虎2",
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 200 弄"
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "3",
? ? ? ? ? date: "2019-12-21",
? ? ? ? ? name: "王小虎3",
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 300 弄"
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "4",
? ? ? ? ? date: "2019-12-20",
? ? ? ? ? name: "王小虎4",
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 400 弄"
? ? ? ? }
? ? ? ]
? ? };
? },
? mounted() {
? ? this.rowDrop();
? ? this.columnDrop();
? },
? methods: {
? ? //行拖拽
? ? rowDrop() {
? ? ? const tbody = document.querySelector(".el-table__body-wrapper tbody");
? ? ? const _this = this;
? ? ? Sortable.create(tbody, {
? ? ? ? // 官網(wǎng)上的配置項,加到這里面來,可以實現(xiàn)各種效果和功能
? ? ? ? animation: 150,
? ? ? ? ghostClass: "blue-background-class",
? ? ? ? onEnd({ newIndex, oldIndex }) {
? ? ? ? ? const currRow = _this.tableData.splice(oldIndex, 1)[0];
? ? ? ? ? _this.tableData.splice(newIndex, 0, currRow);
? ? ? ? }
? ? ? });
? ? },
? ? //列拖拽
? ? columnDrop() {
? ? ? const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
? ? ? this.sortable = Sortable.create(wrapperTr, {
? ? ? ? animation: 180,
? ? ? ? delay: 0,
? ? ? ? onEnd: evt => {
? ? ? ? ? const oldItem = this.dropCol[evt.oldIndex];
? ? ? ? ? this.dropCol.splice(evt.oldIndex, 1);
? ? ? ? ? this.dropCol.splice(evt.newIndex, 0, oldItem);
? ? ? ? }
? ? ? });
? ? }
? }
};
</script>
<style scoped></style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: