Vue下 Sortable 实现 table 列表字段可拖拽排序,显示隐藏组件开发

news2025/4/1 22:34:26

vue 开发table 列表时,需要动态调整列字段的顺序和显示隐藏

实现效果如图所示:

在这里插入图片描述

vue 组件代码

<template>
    <div style="width: 90%; margin: 0 auto;">
        <el-table :data="tableData" border="" ref="tableNode" @selection-change="handleSelectionChange" 
            :height="windowHeight - 200" v-loading="loading" row-key="field">
            <el-table-column type="selection" width="70">
            </el-table-column>
            <el-table-column prop="fieldName" label="列名">
            </el-table-column>
            <el-table-column prop="sortNum" label="排序">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: flex-end; padding-top: 20px;">
            <el-button @click="reset" size="mini">取消</el-button>
            <el-button type="primary" @click="submit" size="mini">保存</el-button>
        </div>
    </div>
</template>


<script>
import { setPageFieldSort, getPageFieldSort } from "@/api/public";
import Sortable from "sortablejs";

export default {
    name: 'listFieldSet',
    data() {
        return {
            pageName: "",
            tableData: [],
            multipleSelection: [],
            selectedRowsBackup: [],
            loading: false,
            windowHeight: window.innerHeight,
        }
    },
    updated() {
        this.$nextTick(() => {
            this.$refs.tableNode.doLayout()
        })
    },
    mounted() {
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            this.windowHeight = window.innerHeight;
        },
        initData(pageName) {
            this.pageName = pageName;
            if (this.tableData && this.tableData.length === 0) {
                this.loading = true;
                getPageFieldSort({
                    'pageName': pageName
                }).then(res => {
                    this.tableData = res.data;
                    if (this.tableData) {
                        this.tableData.forEach(item => {
                            if (item.isShow) {
                                this.multipleSelection.push(item.field);
                                this.$nextTick(() => {
                                    this.$refs.tableNode.toggleRowSelection(item, true);
                                });
                            }
                        });
                    }
                }).finally(() => {
                    this.loading = false;
                });

                //声明表格拖动排序方法
                this.pullSort();
            }
        },
        //    
        //表格拖动排序方法
        pullSort() {
            // 通过ref获取Dom节点
            const el = this.$refs.tableNode.$el.querySelectorAll(
                ".el-table__body-wrapper > table > tbody"
            )[0];
            this.sortable = Sortable.create(el, {
                animation: 200, //拖拽动画(毫秒)
                setData: function (dataTransfer) {
                    dataTransfer.setData("Text", "");
                },
                onStart: () => {
                    // 拖拽开始前保存当前选中的行
                    this.selectedRowsBackup = [...this.multipleSelection];
                },
                // 结束拖拽
                onEnd: (evt) => {
                    const movedItem = this.tableData.splice(evt.oldIndex, 1)[0];
                    this.tableData.splice(evt.newIndex, 0, movedItem);
                    this.$nextTick(() => {
                        this.selectedRowsBackup.forEach(row => {
                            const targetRow = this.tableData.find(item => item.field === row);
                            if (targetRow) {
                                this.$refs.tableNode.toggleRowSelection(targetRow, true); // 重新选中
                            }
                        });
                    })
                },
            });
        },
        handleSelectionChange(rows) {
            this.multipleSelection = rows.map(row => row.field);
        },
        reset() {
            this.$emit('close');
        },
        submit() {
            this.loading = true;

            this.tableData.forEach(item => {
                item.isShow = this.multipleSelection.findIndex(row => row === item.field) > -1;
            });

            setPageFieldSort({
                'fields': this.tableData,
                'pageName': this.pageName
            }).then(res => {
                this.$message.success("保存成功");
            }).finally(() => {
                this.loading = false;
            });
        },
    }
}
</script>

列表字段实例数据

[{
		"id": 449,
		"userCode": "klfadmin",
		"field": "id",
		"pageName": "projectLaborManagement",
		"sortNum": 1,
		"isShow": 1,
		"fieldName": "序号"
	},
	{
		"id": 450,
		"userCode": "klfadmin",
		"field": "title",
		"pageName": "projectLaborManagement",
		"sortNum": 2,
		"isShow": 1,
		"fieldName": "劳务标题"
	},
	{
		"id": 451,
		"userCode": "klfadmin",
		"field": "state",
		"pageName": "projectLaborManagement",
		"sortNum": 3,
		"isShow": 1,
		"fieldName": "状态"
	}
]

代码说明

  1. template 普通的表格列表展示,主要展示所有的可设置的字段

    • @selection-change 勾选时触发事件,存储一下勾选项,记录的是每行的 field 字段
    • :height 是设置容器的高度,此处是自动适应窗口高度。实现逻辑可参考 前面的文章
  2. initData 方法,加载列表字段,见上的实例数据,此处是接口加载。请求的数据是 第4步存储的数据。

    • this.$refs.tableNode.toggleRowSelection(item, true);接口请求到数据后,遍历数组,触发勾选项默认勾选
    • 注意点:
      • 数据未完全渲染到表格前,尝试操作选中状态,toggleRowSelection 是失效的。
      • 使用 $nextTick 确保 DOM 更新后再操作选中,此处我就踩坑了,没有用$nextTick ,导致一直失效,好久才反应过来。
  3. pullSort 触发表格拖动排序方法

    • setData 解决 Firefox 浏览器拖拽时的兼容性问题,避免出现禁止拖拽的图标。
    • onStart 拖拽开始前,将选中的数据备份一下。踩坑,因为拖拽过程中重新渲染了表格数据,导致选中状态丢失,大家可测试打印一下,看看是否丢失。
    • onEnd 拖拽结束时的回调函数
      • evt.oldIndex 和 evt.newIndex

        • Sortable.js 提供的拖拽事件参数,表示拖拽前后的位置索引。
      • 数组元素移动逻辑

        • splice(evt.oldIndex, 1)[0]:从原位置删除元素并返回该元素。
        • splice(evt.newIndex, 0, movedItem):将元素插入新位置。
      • this.$nextTick

        • 确保 DOM 更新完成后再操作选中状态,避免因异步渲染导致的行选中失效。
      • 恢复选中状态的逻辑

        • selectedRowsBackup:拖拽前备份的选中行字段(如 [‘field1’, ‘field2’])。

        • this.tableData.find(item => item.field === row):根据 field 找到拖拽后的行对象。

        • toggleRowSelection(targetRow, true):手动设置行选中(需配合 表格 ref)。

  4. submit 提交保存,将排序后的数组保存下来,并且同时保存一下选中状态。

Sortable.js 完整流程图

开始拖拽
  → 备份选中行 (onStart)
  → 移动数据 (onEnd)
  → 等待DOM更新 ($nextTick)
  → 遍历备份的选中字段
    → 找到新位置的行对象
    → 重新选中 (toggleRowSelection)
结束

父组件使用方式

Drawer 抽屉组件 加载子组件设置
	<el-drawer title="列表设置" :visible.sync="listFieldSet.dialogVisible" size="20%" direction="rtl">
	    <listFieldSet ref="listFieldSetRef" @close="listFieldSet.dialogVisible = false">
	    </listFieldSet>
	</el-drawer>
父组件使用
<template>
    <el-table :data="tableData" v-loading="loading" border style="width: 100%" ref="table">
        <template v-for="(item, index) in listFieldData">
            <el-table-column v-if="item.isShow" :key="index" :prop="item.field" :label="item.fieldName" width="120">
                <template slot-scope="scope">
                    <span v-if="item.field === 'proName'">
                        {{ scope.row.project ? scope.row.project.proName : '' }}
                    </span>
                    <span v-else>
                        {{ scope.row[item.field] || '' }}
                    </span>
                </template>
            </el-table-column>
        </template>
        <el-table-column label="操作" fixed="right">

        </el-table-column>
    </el-table>
</template>

使用的场景和方式非常多,上面我是用遍历+判断,正常渲染排序后的列表字段。大家理解后可以灵活应对类似需求

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324890.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

李飞飞、吴佳俊团队新作:FlowMo如何以零卷积、零对抗损失实现ImageNet重构新巅峰

目录 一、摘要 二、引言 三、相关工作 四、方法 基于扩散先前的离散标记化器利用广告 架构 阶段 1A&#xff1a;模式匹配预训练 阶段 1B&#xff1a;模式搜索后训练 采样 第二阶段&#xff1a;潜在生成建模 五、Coovally AI模型训练与应用平台 六、实验 主要结果 …

.js项目编译成.exe程序(交叉编译全过程整理)

1.前提: (这个文档有配套的视频解说教程,大家想看的话, 直接在 blibli搜索 , 尘埃落在星河湾 这个up主, 将vtk.js打包成.exe实录课程_哔哩哔哩_bilibili ) 先将下载库的环境搭建好: 打开编辑配置文件,下面代码依次执行 npm config edit registryhttps://registry.npmmirror.com…

OpenAI 推出图像生成新突破:GPT-4o 实现图像编辑对话化

关键要点 OpenAI 推出了 4o 图像生成功能&#xff0c;集成于 GPT-4o&#xff0c;提供精准且逼真的图像生成。 它似乎适用于多种用户&#xff0c;包括免费用户&#xff0c;API 访问预计几周内推出。 安全措施包括 C2PA 元数据和内容屏蔽&#xff0c;限制生成不适当图像。 研究…

android11关机安卓充电的UI定制化

引言 首先上一张安卓充电的图片&#xff1a; 安卓关机状态下有两种充电模式&#xff1a;uboot-charge和android-charge&#xff0c;可通过dts配置使用哪一种充电模式。 dts配置中uboot-charge和android-charge是互斥的&#xff0c;如下配置的是开启android-charge&#xff1a;…

Web前端之JavaScript的DOM操作冷门API

MENU 前言1、Element.checkVisibility()2、TreeWalker3、Node.compareDocumentPosition()4、scrollIntoViewIfNeeded()5、insertAdjacentElement()6、Range.surroundContents()7、Node.isEqualNode()8、document.createExpression()小结 前言 作为前端开发者&#xff0c;我们每…

集成开发环境革新:IntelliJ IDEA与Cursor AI的智能演进

集成开发环境革新&#xff1a;IntelliJ IDEA 与 Cursor AI 的智能演进 集成开发环境&#xff08;IDE&#xff09; 是软件开发者必不可少的工具。一个优秀的 IDE 不仅能够帮助编写和调试代码&#xff0c;还能集成版本控制和代码优化等多种功能。如今&#xff0c;随着人工智能&a…

EXCEL报错:无法共享此工作薄,因表包含excel表或xml映射的解决方法

在分享工作薄是&#xff0c;如果出现了“无法共享此工作薄&#xff0c;因表包含excel表或xml映射”的报错&#xff0c;那么有两个原因&#xff1a; 1.包含Excel表格&#xff0c;这个也是相对比较常见的原因。 首先选中表格。如果你不知道表的位置在哪&#xff0c;那么在Excel左…

《Linux运维实战:Ubuntu 22.04配置pam实现密码复杂度策略》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;Linux运维实战总结 一、背景信息 由于安全方面的考虑&#xff0c;先要求Ubuntu 22.04系统需配置密码复杂度策略&#xff0c;先要求如下&#xff1…

从代码学习深度学习 - 使用块的网络(VGG)PyTorch版

文章目录 前言一、VGG网络简介1.1 VGG的核心特点1.2 VGG的典型结构1.3 优点与局限性1.4 本文的实现目标二、搭建VGG网络2.1 数据准备2.2 定义VGG块2.3 构建VGG网络2.4 辅助工具2.4.1 计时器和累加器2.4.2 准确率计算2.4.3 可视化工具2.5 训练模型2.6 运行实验总结前言 深度学习…

Windows 安装多用户和其它一些问题 VMware Onedrive打不开

以下以win10家庭版为例&#xff0c;win11、专业版类似。 Onedrive相关问题参看我的其他文章&#xff1a; Windows如何同时登录两个OneDrive个人版账号_onedrive登录两个账号-CSDN博客 win10 win11 设置文件权限以解决Onedrive不能同步问题_onedrive没有同步权限-CSDN博客 O…

java基础自用笔记:异常、泛型、集合框架(List、Set、Map)、Stream流

异常 异常体系 编译时异常代表程序觉得你可能会出错。 运行时异常代表已经出错 异常基本处理 异常的作用 可以在可能出现的异常的地方用返回异常来代替return&#xff0c;这样提醒程序出现异常简洁清晰 自定义异常 最好用运行时异常&#xff0c;不会像编译时异常那样烦人&a…

第六届 蓝桥杯 嵌入式 省赛

参考 第六届蓝桥杯嵌入式省赛程序设计题解析&#xff08;基于HAL库&#xff09;_蓝桥杯嵌入式第六届真题-CSDN博客 一、分析功能 RTC 定时 1&#xff09;时间初始化 2&#xff09;定时上报电压时间 ADC测量 采集电位器的输出电压信号。 串行功能 1&#xff09;传送要设置…

爱普生FC-135晶振5G手机的极端温度性能守护者

在5G时代&#xff0c;智能手机不仅需要高速率与低延迟&#xff0c;更需在严寒、酷暑、振动等复杂环境中保持稳定运行。作为 5G 手机的核心时钟源&#xff0c;爱普生32.768kHz晶振FC-135凭借其宽温适应性、高精度稳定性与微型化设计&#xff0c;成为5G手机核心时钟源的理想选择&…

如何备份你的 Postman 所有 Collection?

团队合作需要、备份&#xff0c;还是迁移到其他平台&#xff0c;我们都需要在 Postman 中将这些珍贵的集合数据导出。 如何从 Postman 中导出所有集合(Collection)教程

MinGW下编译ffmpeg源码时生成compile_commands.json

在前面的博文MinGW下编译nginx源码中&#xff0c;有介绍到使用compiledb工具在MinGW环境中生成compile_commands.json&#xff0c;以为compiledb是捕获的make时的输出&#xff0c;而nginx生成时控制台是有输出编译时的命令行信息的&#xff0c;笔者之前编译过ffmpeg的源码&…

【数据结构】树与森林

目录 树的存储方法 双亲表示法 孩子表示法 孩子兄弟表示法 树、森林与二叉树的转换 树转换成二叉树 森林转换成二叉树 二叉树转换成森林 树与森林的遍历 树的遍历 森林的遍历 树的存储方法 双亲表示法 这种存储结构采用一组连续空间来存储每个结点&#xff0c;同时…

跟着StatQuest学知识08-RNN与LSTM

一、RNN &#xff08;一&#xff09;简介 整个过程权重和偏置共享。 &#xff08;二&#xff09;梯度爆炸问题 在这个例子中w2大于1&#xff0c;会出现梯度爆炸问题。 当我们循环的次数越来越多的时候&#xff0c;这个巨大的数字会进入某些梯度&#xff0c;步长就会大幅增加&…

【SpringCloud】Eureka的使用

3. Eureka 3.1 Eureka 介绍 Eureka主要分为两个部分&#xff1a; EurekaServer: 作为注册中心Server端&#xff0c;向微服务应用程序提供服务注册&#xff0c;发现&#xff0c;健康检查等能力。 EurekaClient: 服务提供者&#xff0c;服务启动时&#xff0c;会向 EurekaS…

初识MySQL · 数据类型

目录 前言&#xff1a; 数值类型 文本、二进制数据类型 时间类型 String类型 前言&#xff1a; 对于MySQL来说&#xff0c;是一门编程语言&#xff0c;可能定义不是那么的严格&#xff0c;但是对于MySQL来说也是拥有自己的数据类型的&#xff0c;比如tinyint&#xff0c;…

QT图片轮播器(QT实操学习2)

1.项目架构 1.UI界面 2.widget.h​ #ifndef WIDGET_H #define WIDGET_H#include <QWidget>#define TIMEOUT 1 * 1000 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent n…