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

element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果

 更新時間：2023年10月10日 08:46:29   作者：北鳥南游  
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實現(xiàn)table行拖動排序,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的同學(xué)可以自己動手試一試

使用element-plus的el-table組件創(chuàng)建出來的table。結(jié)合sortable.js實現(xiàn)行拖動排序。

安裝包 npm install -D sortablejs

使用官方table示例代碼

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>
<script lang="ts" setup>
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>

引入 sortablejs 插件；

import Sortable from 'sortablejs'

然后創(chuàng)建排序函數(shù)實例。

const elTableRef = ref();
const setSort = () => {
  const el = elTableRef?.value?.$el.querySelector('tbody')
  new Sortable(el, {
    animation: 180,
    delay: 0,
    onEnd: (e) => {
      const targetRow = tableData.value.splice(e.oldIndex, 1)
      tableData.value.splice(e.newIndex, 0, targetRow[0]);
    },
  })
}

之后可以在 onMounted 生命周期中調(diào)用下setSort。

完整的案例代碼,實現(xiàn)基本的排序功能

<template>
    <el-table ref="elTableRef" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>
<script lang="ts" setup>
import Sortable from 'sortablejs'
import { onMounted, ref } from 'vue';
const tableData = [
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
const elTableRef = ref();
const setSort = () => {
    const el = elTableRef?.value?.$el.querySelector('tbody')
    new Sortable(el, {
        animation: 180,
        delay: 0,
        onEnd: (e) => {
            const targetRow = tableData.splice(e.oldIndex, 1)
            tableData.splice(e.newIndex, 0, targetRow[0]);
        },
    })
}
onMounted(() => {
    setSort();
})
</script>

數(shù)據(jù)異步加載，會出現(xiàn)排序混亂情況

實際業(yè)務(wù)開發(fā)中，tableData的數(shù)據(jù)都是異步獲取的，接下來模擬下異步獲取數(shù)據(jù)后，進行調(diào)用。

  • 初始化定義tableData數(shù)據(jù)為空數(shù)組 const tableData = ref<any[]>([])
  • 在setTimeout定時器中給tableData賦值。

完整代碼如下：

<template>
    <el-table ref="elTableRef" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>
<script lang="ts" setup>
import Sortable from 'sortablejs'
import { onMounted, ref } from 'vue';
const tableData = ref<any[]>([])
const elTableRef = ref();
const setSort = () => {
    const el = elTableRef?.value?.$el.querySelector('tbody')
    new Sortable(el, {
        animation: 180,
        delay: 0,
        onEnd: (e) => {
            const targetRow = tableData.value.splice(e.oldIndex, 1)
            tableData.value.splice(e.newIndex, 0, targetRow[0]);
        },
    })
}
onMounted(() => {
    setSort();
    setTimeout(() => {
        tableData.value = [
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ]
    }, 200)
})
</script>

?錯誤：此時實現(xiàn)出來的排序功能會有異常，如果拖動第一行到第3行下面。則會出現(xiàn)第1和第2行都移動到了第三行下面

之后在onEnd鉤子中查看 tableData.value 數(shù)據(jù)，會發(fā)現(xiàn)數(shù)據(jù)是正常的排序，1會放在3下面，2保持不動。但是頁面中1和2都放在了3下。

解決辦法：在el-table中添加 row-key="date" 唯一索引屬性；

取消sortable的排序

業(yè)務(wù)開發(fā)過程中，會遇到排序需要二次確認的需求。

  • 如果是確認，則進行排序；
  • 如果取消，則取消排序；

根據(jù) sortablejs 官方介紹；可以在onMove、onUpdate、onEnd的回調(diào)函數(shù)中進行處理。

使用 onMove的話，出現(xiàn)彈窗太早，不符合業(yè)務(wù)開發(fā)。

使用onEnd 已經(jīng)完成了排序。

最后選擇在onUpdate中進行二次彈窗確認。

// 列表內(nèi)元素順序更新的時候觸發(fā)
onUpdate: function (/**Event*/evt) {
  ElMessageBox.confirm(
    '是否拖拽到此位置?',
    '提示',
    {
      confirmButtonText: '確定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '排序成功',
      })
      return true;
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消排序',
      })
      return false;
    })
},

點擊取消時，代碼中使用了return false；但是頁面排序并沒有取消掉。這時查看tableData.value的數(shù)據(jù)，排序是已經(jīng)被取消。

有種似曾相識的bugger味道，在異步數(shù)據(jù)中就是數(shù)據(jù)正常，頁面出現(xiàn)問題。使用row-key進行解決，那么現(xiàn)在再次出現(xiàn)問題是什么原因呢？

最初使用了 vue的forceUpdate進行強制更新頁面，然后并沒有效果。就搜索到強制更新頁面的方式，給el-table添加一個 key 屬性； :key="forceUpdate"

完整示例代碼：

<template>
    <el-table ref="elTableRef" row-key="date" :key="forceUpdate" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>
<script lang="ts" setup>
import Sortable from 'sortablejs'
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const tableData = ref<any[]>([])
const elTableRef = ref();
const forceUpdate = ref(0);
const setSort = () => {
    const el = elTableRef?.value?.$el.querySelector('tbody')
    new Sortable(el, {
        animation: 180,
        delay: 0,
        // 列表內(nèi)元素順序更新的時候觸發(fā)
        onUpdate: function (/**Event*/evt) {
            ElMessageBox.confirm(
                '是否拖拽到此位置?',
                '提示',
                {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '排序成功',
                    })
                    return true;
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消排序',
                    })
                    forceUpdate.value = Date.now();
                    return false;
                })
        },
    })
}
onMounted(() => {
    setTimeout(() => {
        tableData.value = [
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ]
    }, 200)
    setSort();
})
</script>

?存在問題，此時只能拖動一次，點擊取消排序后，整個表格的排序功能失效。

解決辦法：在nextTick中重新調(diào)用下 setSort 方法；

<template>
    <el-table ref="elTableRef" row-key="date" :key="forceUpdate" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>
<script lang="ts" setup>
import Sortable from 'sortablejs'
import { onMounted, ref, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const tableData = ref<any[]>([])
const elTableRef = ref();
const forceUpdate = ref(0);
const setSort = () => {
    const el = elTableRef?.value?.$el.querySelector('tbody')
    new Sortable(el, {
        animation: 180,
        delay: 0,
        // 列表內(nèi)元素順序更新的時候觸發(fā)
        onUpdate: function (/**Event*/evt) {
            ElMessageBox.confirm(
                '是否拖拽到此位置?',
                '提示',
                {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '排序成功',
                    })
                    return true;
                  // 排序成功，可以調(diào)用下保存接口，將數(shù)據(jù)保存下來，然后更新下tableData數(shù)據(jù)
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消排序',
                    })
                    forceUpdate.value = Date.now();
                  // 重新調(diào)用下排序
                    nextTick(() => {
                        setSort();
                    })
                })
        },
    })
}
onMounted(() => {
    setTimeout(() => {
        tableData.value = [
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ]
    }, 200)
    setSort();
})
</script>

以上就是element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果的詳細內(nèi)容，更多關(guān)于element-plus實現(xiàn)table行拖拽的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • 多個Vue項目部署到服務(wù)器的步驟記錄

    多個Vue項目部署到服務(wù)器的步驟記錄

    這篇文章主要給大家介紹了關(guān)于多個Vue項目部署到服務(wù)器的相關(guān)資料，文中通過圖文介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • Vue3?setup的注意點及watch監(jiān)視屬性的六種情況分析

    Vue3?setup的注意點及watch監(jiān)視屬性的六種情況分析

    這篇文章主要介紹了Vue3?setup的注意點及watch監(jiān)視屬性的六種情況,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-04-04
  • element el-table表格的二次封裝實現(xiàn)(附表格高度自適應(yīng))

    element el-table表格的二次封裝實現(xiàn)(附表格高度自適應(yīng))

    這篇文章主要介紹了element el-table表格的二次封裝實現(xiàn)(附表格高度自適應(yīng))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • vue實現(xiàn)一個炫酷的日歷組件

    vue實現(xiàn)一個炫酷的日歷組件

    公司業(yè)務(wù)新開了一個商家管理微信H5移動端項目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實現(xiàn)一個炫酷的日歷組件，感興趣的朋友參考下吧
    2018-10-10
  • Vue3中setup方法的用法詳解

    Vue3中setup方法的用法詳解

    在vue3版本中，引入了一個新的函數(shù)，叫做setup。這篇文章將為大家詳細介紹一下Vue3中setup方法的用法，感興趣小伙伴的可以了解一下
    2022-07-07
  • vue2如何使用vue-i18n搭建多語言切換環(huán)境

    vue2如何使用vue-i18n搭建多語言切換環(huán)境

    這篇文章主要介紹了vue2-使用vue-i18n搭建多語言切換環(huán)境的相關(guān)知識,在data(){}中獲取的變量存在更新this.$i18n.locale的值時無法自動切換的問題,需要刷新頁面才能切換語言,感興趣的朋友一起看看吧
    2023-12-12
  • Vue使用Echart圖標插件之柱狀圖

    Vue使用Echart圖標插件之柱狀圖

    這篇文章主要為大家詳細介紹了Vue使用Echart圖標插件之柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue實現(xiàn)文本展開收起功能

    Vue實現(xiàn)文本展開收起功能

    這篇文章主要為大家詳細介紹了Vue實現(xiàn)文本展開收起功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vuex?Action的?{?commit?}的寫法教程

    Vuex?Action的?{?commit?}的寫法教程

    實踐中，我們會經(jīng)常用到?ES2015?的參數(shù)解構(gòu)來簡化代碼（特別是我們需要調(diào)用commit很多次的時候，{commit}?寫法是解構(gòu)后得到的，這篇文章主要介紹了Vuex?Action的{?commit?}的寫法,需要的朋友可以參考下
    2023-10-10
  • Vue的elementUI實現(xiàn)自定義主題方法

    Vue的elementUI實現(xiàn)自定義主題方法

    下面小編就為大家分享一篇Vue的elementUI實現(xiàn)自定義主題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02

最新評論