亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Elementui表格組件+sortablejs實現(xiàn)行拖拽排序的示例代碼

 更新時間:2019年08月28日 16:07:30   作者:吃和遠方  
這篇文章主要介紹了Elementui表格組件+sortablejs實現(xiàn)行拖拽排序,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

運營小姐姐說想要可以直接拖拽排序的功能,原來在序號六的廣告可能會因為金主爸爸加錢換到序號一的位置,拖拽操作就很方便

效果

實現(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)文章

  • Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法

    Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法

    今天小編就為大家分享一篇Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實現(xiàn)

    淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實現(xiàn)

    這篇文章主要為大家詳細介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實現(xiàn),文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下
    2024-05-05
  • Vue3中?引入Ant?Design的操作方法

    Vue3中?引入Ant?Design的操作方法

    Ant?Design?是一個開源庫,可讓您創(chuàng)建吸引人的響應(yīng)式網(wǎng)站。如果您想使用經(jīng)過充分測試且易于學(xué)習(xí)的框架,那么它是您下一個項目的絕佳選擇,這篇文章主要介紹了如何在?Vue?3?中使用?Ant?Design,需要的朋友可以參考下
    2023-04-04
  • 在Vue中使用Select選擇器拼接label的操作

    在Vue中使用Select選擇器拼接label的操作

    這篇文章主要介紹了在Vue中使用Select選擇器拼接label的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 關(guān)于element中el-cascader的使用方式

    關(guān)于element中el-cascader的使用方式

    這篇文章主要介紹了關(guān)于element中el-cascader的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果

    vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果

    這篇文章主要為大家詳細介紹了vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • Vue2.x中的Render函數(shù)詳解

    Vue2.x中的Render函數(shù)詳解

    通常開發(fā)vue我們使用的是模板語法,其實還有和react相同的語法,那就是render函數(shù),同樣支持jsx語法。Vue 的模板實際是編譯成了 render 函數(shù)。
    2017-05-05
  • Vue超詳細講解重試機制示例

    Vue超詳細講解重試機制示例

    這篇文章主要介紹了Vue重試機制示例,重試指的是當加載出錯時,有能力重新發(fā)起加載組件的請求。異步組件加載失敗后的重試機制,與請求服務(wù)端接口失敗后的重試機制一樣
    2023-01-01
  • vue+elementUI動態(tài)增加表單項并添加驗證的代碼詳解

    vue+elementUI動態(tài)增加表單項并添加驗證的代碼詳解

    這篇文章主要介紹了vue+elementUI動態(tài)增加表單項并添加驗證的代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-12-12
  • Vue3利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳

    Vue3利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳

    這篇文章主要為大家詳細介紹了Vue3如何利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳(帶哈希計算),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-10-10

最新評論