欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于Element UI table 順序拖動方式

 更新時間:2022年08月09日 17:13:45   作者:長不大的大灰狼  
這篇文章主要介紹了關(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):

[1] Sortable.js官網(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日志之如何用select選中默認值

    vue日志之如何用select選中默認值

    這篇文章主要介紹了vue日志之如何select選中默認值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 在VUE3中禁止網(wǎng)頁返回到上一頁的方法

    在VUE3中禁止網(wǎng)頁返回到上一頁的方法

    這篇文章主要介紹了在VUE3中如何禁止網(wǎng)頁返回到上一頁,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • vue中配置后端接口服務(wù)信息詳解

    vue中配置后端接口服務(wù)信息詳解

    這篇文章主要介紹了vue中配置后端接口服務(wù)信息詳解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue項目啟動端口更改的實現(xiàn)

    vue項目啟動端口更改的實現(xiàn)

    在Vue前端項目中,可以通過修改配置文件來指定啟動的端口號,本文就來介紹 一下vue項目啟動端口更改的實現(xiàn),感興趣的可以了解一下
    2023-10-10
  • vue3實現(xiàn)H5表單驗證組件的示例

    vue3實現(xiàn)H5表單驗證組件的示例

    本文主要介紹了vue3實現(xiàn)H5表單驗證組件的示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • 解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法

    解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法

    這篇文章主要介紹了解決vue中數(shù)據(jù)更新視圖不更新問題this.$set()方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù)

    vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù)

    這篇文章主要介紹了vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報文,前端采用vue進行接收,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
    2024-02-02
  • Vue.js自定義指令學(xué)習(xí)使用詳解

    Vue.js自定義指令學(xué)習(xí)使用詳解

    這篇文章主要為大家詳細介紹了Vue.js自定義指令的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • 解決vue addRoutes不生效問題

    解決vue addRoutes不生效問題

    這篇文章主要介紹了解決vue addRoutes不生效問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue3+Vite 環(huán)境變量和模式配置詳解(推薦)

    Vue3+Vite 環(huán)境變量和模式配置詳解(推薦)

    在Vue 3中,你可以通過 import.meta.env 訪問環(huán)境變量,這些變量可以在你的應(yīng)用代碼中使用,但它們通常用于配置不應(yīng)該硬編碼在代碼中的值,這篇文章主要介紹了Vue3+Vite 環(huán)境變量和模式配置詳解,需要的朋友可以參考下
    2024-12-12

最新評論