首页 > 其他分享 >Table 变身记：Element-Plus携手SortableJS打造可拖拽式体验

Table 变身记：Element-Plus携手SortableJS打造可拖拽式体验

时间：2024-01-23 15:05:42浏览次数：25  
标签：const name Grove Element SortableJS Plus date 2016 tableData

使用element-plus的el-table组件创建出来的table。结合sortable.js实现行拖动排序。

安装包 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'

然后创建排序函数实例。

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。

完整的案例代码,实现基本的排序功能

<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>

数据异步加载，会出现排序混乱情况

实际业务开发中，tableData的数据都是异步获取的，接下来模拟下异步获取数据后，进行调用。

  • 初始化定义tableData数据为空数组 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>

❌错误：此时实现出来的排序功能会有异常，如果拖动第一行到第3行下面。则会出现第1和第2行都移动到了第三行下面

之后在onEnd钩子中查看 tableData.value 数据，会发现数据是正常的排序，1会放在3下面，2保持不动。但是页面中1和2都放在了3下。

解决办法：在el-table中添加 row-key="date" 唯一索引属性；

取消sortable的排序

业务开发过程中，会遇到排序需要二次确认的需求。

  • 如果是确认，则进行排序；
  • 如果取消，则取消排序；

根据 sortablejs 官方介绍；可以在onMove、onUpdate、onEnd的回调函数中进行处理。

使用 onMove的话，出现弹窗太早，不符合业务开发。

使用onEnd 已经完成了排序。

最后选择在onUpdate中进行二次弹窗确认。

// 列表内元素顺序更新的时候触发
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的数据，排序是已经被取消。

有种似曾相识的bugger味道，在异步数据中就是数据正常，页面出现问题。使用row-key进行解决，那么现在再次出现问题是什么原因呢？

最初使用了 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,
        // 列表内元素顺序更新的时候触发
        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中重新调用下 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,
        // 列表内元素顺序更新的时候触发
        onUpdate: function (/**Event*/evt) {
            ElMessageBox.confirm(
                '是否拖拽到此位置?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '排序成功',
                    })
                    return true;
                  // 排序成功，可以调用下保存接口，将数据保存下来，然后更新下tableData数据
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消排序',
                    })
                    forceUpdate.value = Date.now();
                  // 重新调用下排序
                    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>

学习资料：点此下载

标签：const,name,Grove,Element,SortableJS,Plus,date,2016,tableData
From： https://blog.51cto.com/u_15723831/9380010

相关文章

  • MybatisPlus
    MybatisPlus想念mp的第xxx天......
  • npm ERR! code 1 npm ERR! path E:\20231213\vue-element-admin\node_modules\nod
    执行npminstall报错，根据下面报错信息可知，是由于nodejs和node-sass版本不一致造成的，也就是当前项目比较旧，而我安装的nodejs比较新。PSE:\20231213\vue-element-admin>PSE:\20231213\vue-element-admin>PSE:\20231213\vue-element-admin>PSE:\20231213\vue-element-adm......
  • [EFI]ASUS Tuf Gamming B550m Plus+AMD Ryzen 5 4650G电脑 Hackintosh 黑苹果efi引导
    硬件型号驱动情况主板AsusTUFGammingB550mPlus+WIFI处理器AMDRyzen54650G已驱动内存32GB(4x8GB)AsgardRGB@3200已驱动硬盘Samsung970Pro512Gb已驱动显卡SapphireRX6600XT已驱动声卡ALCS-1200A已驱动网卡RTL81252.5GbE已驱动无线网卡+蓝牙BCM94360CDSonoma及......
  • SpringBoot集成MybatisPlus
    1、添加依赖<!--mybatis-plus启动器--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></dependency><!--mybatis-plus代码生成器--><depe......
  • CF1542B Plus and Multiply
    CF1542BPlusandMultiply题目传送门题意有一个集合，最开始集合中只有\(1\)，又有\(a\),\(b\)，如果集合中存在\(k\)，那么将\(ka\)和\(k+b\)加入集合试求，\(n\)是否尊在于集合之中思路稍加枚举（或者瞪眼大法）可得，该集合中的任何数都可被表示为\(k=ax+by\)（\(a,b\)为非负整数）分个类更......
  • springboot+mybatis-plus+redis整合（附上脚手架完整代码）
    首先新建一个springboot项目next到这里的时候，我们可以选择用jdk几，还有就是Group，这个一般就是com.公司名字了，artifact就是项目名字。个人开发我还是喜欢用com.名字前缀哈。到了这一步的话，如果对这个项目有什么别的需求，比如需要用到mybatis啥的可以勾相应的选项。其实就是idea自动帮......
  • 【Mybatis-Plus】Mybatis-Plus多数据源（三）
    参考官网：多数据源|MyBatis-Plus(baomidou.com)使用方法1、引入dynamic-datasource-spring-boot-starter。1<dependency>2<groupId>com.baomidou</groupId>3<artifactId>dynamic-datasource-spring-boot-starter</artifactId>4&l......
  • IC验证中$test$plusargs(),$value$plusargs()怎么用？有什么坑？
    各位朋友，在SystemVerilog中有两个函数作用很大，他们是：$test$plusargs(string)$value$plusargs(user_string,variable) 01 怎么用？相信从这首诗中大家已经很清楚的知道这两个函数什么作用了！没错！我们在仿真运行过程中可以“+”很多的命令字符串，而这两个函数就是与这些......
  • mybatis-plus作为maven分模块dao层引入的配置
    1.maven分模块说明demo-daodemo-webdemo-web中引用demo-dao层,进行crud2.数据库配置放到哪里？放到demo-web模块的application.propertiesspring.datasource.driver-class-name=@[email protected][email protected]@[email protected]@......
  • 手写 Mybatis-plus 基础架构（工厂模式+ Jdk 动态代理统一生成代理 Mapper）
    这里写目录标题前言温馨提示手把手带你解析@MapperScan源码手把手带你解析@MapperScan源码细节剖析工厂模式+Jdk代理手撕脚手架，复刻BeanDefinitionRegistryPostProcessor手撕FactoryBean代理Mapper在Spring源码中的生成流程手撕MapperProxyFactory手撕增强逻辑Invoca......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99