Elementui表格組件+sortablejs實現(xiàn)行拖拽排序的示例代碼
前言
運營小姐姐說想要可以直接拖拽排序的功能,原來在序號六的廣告可能會因為金主爸爸加錢換到序號一的位置,拖拽操作就很方便
效果

實現(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: '序號',
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)
}
})
}
}
}
完成!你們可以看得懂的!你可以你能行!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3調(diào)度器effect的scheduler功能實現(xiàn)詳解
這篇文章主要為大家介紹了vue3調(diào)度器effect的scheduler功能實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
在Vue3和TypeScript中大文件分片上傳的實現(xiàn)與優(yōu)化
本文介紹在 Vue 3 和 TypeScript 環(huán)境下大文件分片上傳的實現(xiàn)與優(yōu)化,包括項目前后端技術(shù)棧,前端的文件切片、并發(fā)上傳、計算 Hash、斷點續(xù)傳和用戶體驗優(yōu)化,后端的文件接收存儲、切片合并、異常處理與日志記錄,還提及遇到的問題及解決方案,總結(jié)了此方式的優(yōu)勢和重要性2025-01-01
vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)
這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-01-01
基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點續(xù)傳的全局上傳插件功能
這篇文章主要介紹了基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點續(xù)傳的全局上傳插件,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-02-02
關(guān)于el-form表單驗證中的validator與validate使用時的問題
這篇文章主要介紹了關(guān)于el-form表單驗證中的validator與validate使用時的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06

