<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
使用Sortable.js外掛。對element-ui中的el-table進行拖拽行排序。
new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' });
官網:
[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() 方法有三個引數:
index
:規定新增/刪除專案的位置,使用負數可從陣列結尾處規定位置。howmany
:要刪除的專案數量。如果設定為 0,則不會刪除專案。item1, ..., itemX
:向陣列新增的新專案。注意:
最近在使用element table的時候,經常會遇到排序的問題,如果只是簡單的排序的話,element官方已經給出了指定的方法
//table的預設排序方式是按ID排序 順序為遞減 這裡可以改成其它 比如 order <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}"> //設定sortable屬性時出現排序按鈕 <el-table-column prop="ID" label="座號" sortable> </el-table>
但是,element官方元件並不支援拖拽排序,我在這裡引入sortablejs實現拖拽排序的功能
sortablejs GitHub地址
//sortablejs GitHub地址 https://github.com/SortableJS/Sortable#readme
//安裝sortable.js Install with NPM: $ npm install sortablejs --save //在元件內引入 import Sortable from 'sortablejs' //為需要拖拽排序的表格新增ref屬性 <el-table ref="dragTable"> //在資料渲染完畢新增拖拽事件 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() //資料渲染完畢執行方法 }) } 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', '') }, //拖拽結束執行,evt執向拖拽的引數 onEnd: evt => { //判斷是否重新排序 if(evt.oldIndex !== evt.newIndex){ let data = { id:this.bannerTable[evt.oldIndex].id, banner_order:evt.newIndex } //資料提交失敗則恢復舊的排序 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) } }) }
以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45