Elementui表格組件+sortablejs實(shí)現(xiàn)行拖拽排序的示例代碼
更新時(shí)間：2019年08月28日 16:07:30 作者：吃和遠(yuǎn)方
這篇文章主要介紹了Elementui表格組件+sortablejs實(shí)現(xiàn)行拖拽排序，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
前言
運(yùn)營(yíng)小姐姐說(shuō)想要可以直接拖拽排序的功能，原來(lái)在序號(hào)六的廣告可能會(huì)因?yàn)榻鹬靼职旨渝X換到序號(hào)一的位置，拖拽操作就很方便
效果
實(shí)現(xiàn)方式
template部分
<el-table
v-loading="loading"
:default-sort="{prop: 'sortNum', order: 'ascending'}"
:data="list"
border
align="left"
>
<el-table-column
show-overflow-tooltip
v-for="(item, index) in col"
:key="`col_${index}`"
:prop="col[index].prop"
:label="item.label"
>
<template slot-scope="scope">
<p>{{scope.row[item.prop]}}</p>
</template>
</el-table-column>
</el-table>
script部分
import Sortable from 'sortablejs'
export default {
components: {
Sortable
},
data() {
return {
col: [
{
label: '位置',
prop: 'location'
},
{
label: '序號(hào)',
prop: 'sortNum'
},
{
label: '經(jīng)辦人',
prop: 'operator'
},
{
label: '操作',
prop: 'isClick'
}
]
}
},
mounted() {
this.rowDrop()
},
methods: {
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.list.splice(oldIndex, 1)[0]
_this.list.splice(newIndex, 0, currRow)
_this.list = _this.list.filter(({ adId }) => adId !== 0)
_this.list.forEach((item, index) => {
_this.sortString += item.adId + ':' + (index + 1) + ','
})
_this.sortString = _this.sortString.substr(0, _this.sortString.length - 1)
}
})
}
}
}
完成！你們可以看得懂的！你可以你能行！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法
今天小編就為大家分享一篇Vue 配合eiement動(dòng)態(tài)路由,權(quán)限驗(yàn)證的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05
Ant?Design?是一個(gè)開(kāi)源庫(kù)，可讓您創(chuàng)建吸引人的響應(yīng)式網(wǎng)站。如果您想使用經(jīng)過(guò)充分測(cè)試且易于學(xué)習(xí)的框架，那么它是您下一個(gè)項(xiàng)目的絕佳選擇，這篇文章主要介紹了如何在?Vue?3?中使用?Ant?Design,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了在Vue中使用Select選擇器拼接label的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
通常開(kāi)發(fā)vue我們使用的是模板語(yǔ)法，其實(shí)還有和react相同的語(yǔ)法，那就是render函數(shù)，同樣支持jsx語(yǔ)法。Vue 的模板實(shí)際是編譯成了 render 函數(shù)。2017-05-05
這篇文章主要介紹了Vue重試機(jī)制示例，重試指的是當(dāng)加載出錯(cuò)時(shí)，有能力重新發(fā)起加載組件的請(qǐng)求。異步組件加載失敗后的重試機(jī)制，與請(qǐng)求服務(wù)端接口失敗后的重試機(jī)制一樣2023-01-01
vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼詳解
這篇文章主要介紹了vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
Vue3利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳
這篇文章主要為大家詳細(xì)介紹了Vue3如何利用組合式函數(shù)和Shared Worker實(shí)現(xiàn)后臺(tái)分片上傳(帶哈希計(jì)算),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10