關(guān)于Element UI table 順序拖動方式
Element UI table 順序拖動
使用Sortable.js插件。對element-ui中的el-table進行拖拽行排序。
new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' });
官網(wǎng):
[2] Sortable更多使用示例
基本使用
1、安裝
npm install sortablejs --save
2、引用
import Sortable from 'sortablejs'
3、使用
<el-table id="table" :data="list" row-key="id" style="width: 500px" > <el-table-column prop="name" label="稱" width="180" /> <el-table-column label="操作"> <template slot-scope="scope"> <el-button class="handle" size="mini" ><i class="el-icon-rank" /> 移動</el-button> </template> </el-table-column> </el-table>
<script> // 引用 Sortable import Sortable from 'sortablejs' export default { data() { return { list: [] } }, mounted() { this.rowDrop(); }, methods: { //行拖拽,排序方法 rowDrop() { // 獲取對象 const el = document.querySelector('#ability-table .el-table__body-wrapper tbody') const self = this // 配置 var ops = { handle: ".handle", onEnd({ newIndex, oldIndex }) { self.list.splice(newIndex, 0, self.list.splice(oldIndex, 1)[0]) const newArray = self.list.slice(0) newArray.forEach((value, index) => { value.orderNum = index + 1 //序號為index+1 self.$set(newArray, index, value) self.list= [] // self.$nextTick(() => { self.list= newArray ? newArray : [] }) } Sortable.create(el,ops) }, } </script>
說明:
orderNum
:為排序號
handle
: 使列表單元中符合選擇器的元素成為拖動的手柄,只有按住拖動手柄才能使列表單元進行拖動
Array.splice() 方法有三個參數(shù):
index
:規(guī)定添加/刪除項目的位置,使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。howmany
:要刪除的項目數(shù)量。如果設(shè)置為 0,則不會刪除項目。item1, ..., itemX
:向數(shù)組添加的新項目。
注意:
- newArray = Array.splice(0): 表示將原數(shù)組賦給新數(shù)組,并將原數(shù)組清空。
- 要在el-table渲染后調(diào)用 this.rowDrop(); 方法
- 組件綁定是根據(jù)Id綁定的:document.querySelector('#ability-table .el-table__body-wrapper tbody'),要注意父組件Id和子組件Id不要重名,否則會優(yōu)先綁定到父組件對應(yīng)的Id元素。
element關(guān)于table拖拽排序問題
最近在使用element table的時候,經(jīng)常會遇到排序的問題,如果只是簡單的排序的話,element官方已經(jīng)給出了指定的方法
//table的默認排序方式是按ID排序 順序為遞減 這里可以改成其它 比如 order ? ? <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}"> ? ? ? //設(shè)置sortable屬性時出現(xiàn)排序按鈕 ? ? ? <el-table-column prop="ID" label="座號" sortable> ? ? </el-table>
但是,element官方組件并不支持拖拽排序,我在這里引入sortablejs實現(xiàn)拖拽排序的功能
sortablejs GitHub地址
//sortablejs ? ? GitHub地址 https://github.com/SortableJS/Sortable#readme
//安裝sortable.js Install with NPM: $ npm install sortablejs --save //在組件內(nèi)引入 import Sortable from 'sortablejs' //為需要拖拽排序的表格添加ref屬性 <el-table ?ref="dragTable"> //在數(shù)據(jù)渲染完畢添加拖拽事件 created(){ ? ?this.getBanner() }, methods:{ ?? ?async getBanner(val){ ? ? ? ? ? await apiGetBanner().then((res)=>{ ? ? ? ? ? ? ? ?this.bannerTable = res.data.data; ? ? ? ? ? }) ? ? ? ? ?this.oldList = this.bannerTable.map(v => v.id); ? ? ? ? ?this.newList = this.oldList.slice(); ? ? ? ? ?this.$nextTick(() => { ? ? ? ? ? ? ?this.setSort() ?//數(shù)據(jù)渲染完畢執(zhí)行方法 ? ? ? ? ?}) ? ? } ? ? setSort() { ? ? ? ? const el = this.$refs.dragTable.$el.querySelectorAll( ? ? ? ? ?? ??? ?'.el-table__body-wrapper > table > tbody' ? ? ? ? )[0]; ? ? ? ? this.sortable = Sortable.create(el, { ? ? ? ? ?? ?// Class name for the drop placeholder, ? ? ? ? ?? ??? ?ghostClass: 'sortable-ghost',? ? ? ? ? ? ? ? ? setData: function(dataTransfer) { ? ? ? ? ? ? ? ? dataTransfer.setData('Text', '') ? ? ? ? ? ? }, ? ? ? ? ? ?//拖拽結(jié)束執(zhí)行,evt執(zhí)向拖拽的參數(shù) ? ? ? ? ? ?onEnd: evt => { ? ? ? ? ? ? ? //判斷是否重新排序 ? ? ? ? ? ? ? if(evt.oldIndex !== evt.newIndex){ ? ? ? ? ? ? ? ? ? let data = { ? ? ? ? ? ? ? ? ? ? ?id:this.bannerTable[evt.oldIndex].id, ? ? ? ? ? ? ? ? ? ? ?banner_order:evt.newIndex ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? //數(shù)據(jù)提交失敗則恢復(fù)舊的排序 ? ? ? ? ? ? ? ? ? apiPutBanner(data).catch(()=>{ ? ? ? ? ? ? ? ? ? ? ?const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0]; ? ? ? ? ? ? ? ? ? ? ?this.bannerTable.splice(evt.newIndex, 0, targetRow); ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? }) ? ? } }
如果需要列拖拽的話,可以參考下面的代碼,和上面是一樣的原理,在這里我就不贅述了
//行拖拽 ? ? rowDrop() { ? ? ? const tbody = document.querySelector('.el-table__body-wrapper tbody') ? ? ? const _this = this ? ? ? Sortable.create(tbody, { ? ? ? ? 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) ? ? ? ? } ? ? ? }) ? ? }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法
這篇文章主要介紹了解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù)
這篇文章主要介紹了vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報文,前端采用vue進行接收,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-02-02Vue3+Vite 環(huán)境變量和模式配置詳解(推薦)
在Vue 3中,你可以通過 import.meta.env 訪問環(huán)境變量,這些變量可以在你的應(yīng)用代碼中使用,但它們通常用于配置不應(yīng)該硬編碼在代碼中的值,這篇文章主要介紹了Vue3+Vite 環(huán)境變量和模式配置詳解,需要的朋友可以參考下2024-12-12