vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段
更新時間：2023年12月19日 09:38:15 作者：前端初見
最近公司需要做個項目,需要拖拽表格和自定義表格字段,本文主要介紹了vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段,具有一定吃參考價值,感興趣的可以了解一下
前言
背景
公司給了一個需求，需要拖拽表格和自定義表格字段，于是我就開始網(wǎng)上沖浪，于是自己封裝了一套方法，分享給大家，有不明白的可以私信我或者發(fā)在評論區(qū)
el-table自帶支持按列排序，但是當用戶需要自己拖拽進行排序時，現(xiàn)有組件無法滿足。
是時候安利五臟俱全的js庫了，SortableJS
簡單易用，官方文檔上有簡單列表排序，多列表相互拖拽，克隆，禁止sorting等多種demo，現(xiàn)在只記錄關于簡單排序的使用方法
SortableJS官網(wǎng)
一、el-table實現(xiàn)可拖拽移動列
需要安裝插件Sortable.js
npm i sortablejs --save 或者 yarn add sortablejs --save
1.調(diào)取接口獲取數(shù)據(jù)table數(shù)據(jù)
this.$axios
.post("personnel/list", formData)
.then((response) => {
// console.log(response);
this.dynamicTableData = response.data;
}))
接口數(shù)據(jù)
2.參考接口表格字段mock頁面要調(diào)整的數(shù)據(jù)
注意這些數(shù)據(jù)prop是對應接口的字段的，以下數(shù)據(jù)的順序會控制頁面顯示順序
動態(tài)表頭數(shù)據(jù)
export default [
{
disabled: true,
isCheck: true,
fixed:true,
width: "100px",
label: "姓名",
prop: "name"
},
{
disabled: false,
isCheck: true,
width: "180px",
label: "單位",
prop: "unitName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "部門",
prop: "departmentName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "性別",
prop: "sex"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "出生年月",
prop: "birthday"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "籍貫",
prop: "places"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "參加工作時間",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "行政職務",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "行政職務時間",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "行政職級",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "行政職級時間",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "等級",
prop: "rank"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "等級時間",
prop: "rankTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "法律職務",
prop: "legislation"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "法律職務時間",
prop: "legislationTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制學歷",
prop: "fullTimeEducation"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制學位",
prop: "fullTimeDegree"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制專業(yè)",
prop: "fullTimeMajor"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "政治面貌",
prop: "politicsStatus"
},
];
3.引入mock的字段順序h和相關第三方表格拖拽
import Sortable from "sortablejs"; // 引入Sortable表格拖拽插件 import schemas from "./DynamicTableLabels"; // 引入mock的數(shù)據(jù)
4.el-table渲染相關數(shù)據(jù)
- 注意點:
- el-table組件中的data綁定的是接口字段
- el-table-column通過遍歷mock的數(shù)據(jù)渲染prop，lable, 字段和接口數(shù)據(jù)需要一一對應，這樣就可以實現(xiàn)完成渲染
- 復選框和序號是固定
<el-table
v-if="isShowSchemaTable"
:data="tableData.list"
:height="getTableHeight"
style="margin-bottom: 5px"
ref="schema-table"
class="ELtable"
size="small"
stripe
:key="tableKey"
:row-key="
(row) => {
return row.id;
}
"
id="outTable"
@select="handleSelect"
@select-all="handleSelectAll"
@selection-change="updateSelection"
>
<!-- 復選框-->
<el-table-column type="selection" width="55" :reserve-selection="true">
</el-table-column>
<el-table-column
label="序號"
type="index"
align="center"
fixed
width="50px"
></el-table-column>
<el-table-column
v-for="(item, index) in schemas"
v-if="item.isCheck && item.prop !== 'remark'"
:label="item.label"
:prop="item.prop"
:width="item.width"
align="center"
>
<template slot-scope="sc">
<div>
<span v-if="dateFileds.includes(item.prop)">
{{ getFormatDate(sc.row[item.prop]) }}
</span>
<span v-else>{{ sc.row[item.prop] }}</span>
</div>
</template>
</el-table-column>
</el-table>
5.el-table拖拽實現(xiàn)
掛載時開始調(diào)用列拖拽方法
async mounted() {
//表格拖拽方法
this.columnDrop();
},
相關方法封裝
/**
* 列拖拽
*/
columnDrop() {
const _this = this;
// console.log("數(shù)據(jù)", this.schemas);
const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: (evt) => {
const empty = 2;
// 跳過顯示的列數(shù)量，如開頭我們用了一個多選框，h和序號
const oldItem = this.schemas[evt.oldIndex - empty];
this.schemas.splice(evt.oldIndex - empty, 1);
this.schemas.splice(evt.newIndex - empty, 0, oldItem);
_this.reDrawTable();
// 每一次拖拽后都要重繪一次
},
});
},
/**
* 觸發(fā)表格重繪
*/
reDrawTable() {
this.tableKey = Math.random();
this.$nextTick(() => {
// this.rowDrop();
this.columnDrop();
});
},
二、el-table表格動態(tài)排序字段
1.根據(jù)mock的動態(tài)表頭實現(xiàn)一個控制字段的表格
- 注意
- el-table是mock的數(shù)據(jù)
- 排序的上移和下移傳入點擊事件傳入索引
<el-dialog
title="自定義表格排序順序"
:visible.sync="dialogVisibleShow"
append-to-body
:close-on-click-modal="false"
width="500px"
border
id="uptishi"
>
<p style="font-size: 14px; color: red; margin: 0px 0 5px 15px">
<i style="font-size: 16px" class="el-icon-warning"></i>
溫馨提示：修改后的結果視圖設置會立即生效
</p>
<el-table id="uptable" :data="schemas" ref="curtable" height="500">
<el-table-column type="index" label="序號" width="80"></el-table-column>
<el-table-column prop="label" align="cneter" label="列名" width="150">
</el-table-column>
<el-table-column label="排序" min-width="150">
<template slot-scope="scope">
<el-button
type="text"
style="padding: 0"
:disabled="scope.$index == 0"
@click="moveUpward(scope.row, scope.$index)"
>上移</el-button
>
<el-button
type="text"
style="padding: 0"
:disabled="scope.$index + 1 == schemas.length"
@click="moveDown(scope.row, scope.$index)"
>下移</el-button
>
</template>
</el-table-column>
</el-table>
</el-dialog>
2.相關方法
/**
* 表格字段上移方法
*/
moveUpward(row, index) {
// schemas 列數(shù)據(jù)
if (index > 0) {
let upData = this.schemas[index - 1];
this.schemas.splice(index - 1, 1);
this.schemas.splice(index, 0, upData);
console.log("移動成功");
} else {
console.log("第一條數(shù)據(jù)");
this.$message({
message: "已經(jīng)是第一條，上移失敗",
type: "error",
});
}
},
3.表格字段下移方法
/**
* 表格字段下移方法
*/
moveDown(row, index) {
if (index + 1 == this.schemas.length) {
this.$message({
message: "已經(jīng)是最后一條，下移失敗",
type: "error",
});
} else {
let downData = this.schemas[index + 1];
this.schemas.splice(index + 1, 1);
this.schemas.splice(index, 0, downData);
}
},
效果圖：
總結
到此這篇關于vue中el-table實現(xiàn)可拖拽移動列和動態(tài)排序字段的文章就介紹到這了,更多相關vue 可拖拽移動列和動態(tài)排序字段內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用reactive導致數(shù)據(jù)失去響應式的原因和解決方案
在 Vue 的響應式系統(tǒng)中,reactive 對象是一個深度代理,它會追蹤對象屬性的變更,但如果你將整個對象重新賦值,那么 Vue 無法繼續(xù)追蹤新的對象,本文給大家介紹了使用reactive導致數(shù)據(jù)失去響應式的原因和解決方案,需要的朋友可以參考下2024-09-09
詳解Vue webapp項目通過HBulider打包原生APP（vue+webpack+HBulider）
這篇文章主要介紹了詳解Vue webapp項目通過HBulider打包原生APP（vue+webpack+HBulider），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue3 reactive響應式賦值頁面不渲染的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue如何整合mavon-editor編輯器(markdown編輯和預覽)
這篇文章主要介紹了Vue整合mavon-editor編輯器(markdown編輯和預覽)的相關知識，mavon-editor是目前比較主流的markdown編輯器，重點介紹它的使用方法,需要的朋友可以參考下2022-10-10
vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關于vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要介紹了vue?如何根據(jù)條件判斷屬性的添加和去除，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家詳細介紹了vue組件開發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
Vue2.0 實現(xiàn)歌手列表滾動及右側快速入口功能
這篇文章主要介紹了Vue2.0實現(xiàn)歌手列表滾動及右側快速入口功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
在前端項目中,Token用于用戶認證和權限管理,文章介紹了在Vue項目中實現(xiàn)Token的無感刷新,包括Token刷新的原理、攔截器的應用和處理Token過期的方法,感興趣的可以了解一下2024-11-11
這篇文章主要給大家介紹了關于npm踩坑問題的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03