el-table实现可拖拽移动列和动态排序字段

已于 2024-06-12 17:32:05 修改
阅读量10w+ 收藏 28
点赞数 4
文章标签： 前端 javascript vue.js
于 2023-05-24 00:12:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stc_ljc/article/details/130837945
版权
🍿*★,°*:.☆(￣▽￣)/$:*.°★* 🍿
🍟欢迎来到前端初见的博文，本文主要讲解在工作中以一个案例el-table实现可拖拽移动列和动态排序字段🍟
👨‍🔧 个人主页 : 前端初见
🥞喜欢的朋友可以关注一下，下次更新不迷路🥞

文章目录

前言

  1. 背景
    公司给了一个需求，需要拖拽表格和自定义表格字段，于是我就开始网上冲浪，于是自己封装了一套方法，分享给大家，有不明白的可以私信我或者发在评论区
    el-table自带支持按列排序，但是当用户需要自己拖拽进行排序时，现有组件无法满足。
    是时候安利五脏俱全的js库了，SortableJS
    简单易用，官方文档上有简单列表排序，多列表相互拖拽，克隆，禁止sorting等多种demo，现在只记录关于简单排序的使用方法
    SortableJS官网

一、el-table实现可拖拽移动列

需要安装插件Sortable.js

npm i  sortablejs --save
或者
yarn add sortablejs --save
1.调取接口获取数据table数据
this.$axios
        .post("personnel/list", formData)
        .then((response) => {
          // console.log(response);
          this.dynamicTableData = response.data;
        }))

接口数据

在这里插入图片描述

2.参考接口表格字段mock页面要调整的数据

注意这些数据prop是对应接口的字段的，以下数据的顺序会控制页面显示顺序
动态表头数据

export default [
  {
    disabled: true,
    isCheck: true,
    fixed:true,
    width: "100px",
    label: "姓名",
    prop: "name"
  },
  {
    disabled: false,
    isCheck: true,
    width: "180px",
    label: "单位",
    prop: "unitName"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "部门",
    prop: "departmentName"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "性别",
    prop: "sex"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "出生年月",
    prop: "birthday"
  },
  {
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "籍贯",
    prop: "places"
  },
  {
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "参加工作时间",
    prop: "workTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "行政职务",
    prop: "duty"
  },
  {
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "行政职务时间",
    prop: "dutyTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "行政职级",
    prop: "jobGrade"
  },
  {
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "行政职级时间",
    prop: "jobGradeTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "110px",
    label: "等级",
    prop: "rank"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "等级时间",
    prop: "rankTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "法律职务",
    prop: "legislation"
  },
  {
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "法律职务时间",
    prop: "legislationTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "全日制学历",
    prop: "fullTimeEducation"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "全日制学位",
    prop: "fullTimeDegree"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "全日制专业",
    prop: "fullTimeMajor"
  },
  {
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "政治面貌",
    prop: "politicsStatus"
  },
];
3.引入mock的字段顺序h和相关第三方表格拖拽
import Sortable from "sortablejs";
// 引入Sortable表格拖拽插件
import schemas from "./DynamicTableLabels";
// 引入mock的数据
4.el-table渲染相关数据
  • 注意点:
  • el-table组件中的data绑定的是接口字段
  • el-table-column通过遍历mock的数据渲染prop，lable, 字段和接口数据需要一一对应，这样就可以实现完成渲染
  • 复选框和序号是固定
    <el-table
      v-if="isShowSchemaTable"
      :data="tableData.list"
      :height="getTableHeight"
      style="margin-bottom: 5px"
      ref="schema-table"
      class="ELtable"
      size="small"
      stripe
      :key="tableKey"
      :row-key="
        (row) => {
          return row.id;
        }
      "
      id="outTable"
      @select="handleSelect"
      @select-all="handleSelectAll"
      @selection-change="updateSelection"
    >    
      <!-- 复选框-->
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        fixed
        width="50px"
      ></el-table-column>
        <el-table-column
        v-for="(item, index) in schemas"
        v-if="item.isCheck && item.prop !== 'remark'"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        align="center"
      >
        <template slot-scope="sc">
          <div>
            <span v-if="dateFileds.includes(item.prop)">
              {{ getFormatDate(sc.row[item.prop]) }}
            </span>
            <span v-else>{{ sc.row[item.prop] }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
5.el-table拖拽实现

挂载时开始调用列拖拽方法

  async mounted() {
    //表格拖拽方法
    this.columnDrop();
  },

相关方法封装

    /**
     * 列拖拽
     */
    columnDrop() {
      const _this = this;
      // console.log("数据", this.schemas);
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const empty = 2;
          // 跳过显示的列数量，如开头我们用了一个多选框，h和序号 
          const oldItem = this.schemas[evt.oldIndex - empty];
          this.schemas.splice(evt.oldIndex - empty, 1);
          this.schemas.splice(evt.newIndex - empty, 0, oldItem);
          _this.reDrawTable();
          // 每一次拖拽后都要重绘一次
        },
      });
    },
    /**
     * 触发表格重绘
     */
    reDrawTable() {
      this.tableKey = Math.random();
      this.$nextTick(() => {
        // this.rowDrop();
        this.columnDrop();
      });
    },

二、el-table表格动态排序字段

1.根据mock的动态表头实现一个控制字段的表格
  • 注意
    • el-table是mock的数据
    • 排序的上移和下移传入点击事件传入索引
      在这里插入图片描述
    <el-dialog
      title="自定义表格排序顺序"
      :visible.sync="dialogVisibleShow"
      append-to-body
      :close-on-click-modal="false"
      width="500px"
      border
      id="uptishi"
    >
      <p style="font-size: 14px; color: red; margin: 0px 0 5px 15px">
        <i style="font-size: 16px" class="el-icon-warning"></i>
        温馨提示：修改后的结果视图设置会立即生效
      </p>
      <el-table id="uptable" :data="schemas" ref="curtable" height="500">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="label" align="cneter" label="列名" width="150">
        </el-table-column>
        <el-table-column label="排序" min-width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="padding: 0"
              :disabled="scope.$index == 0"
              @click="moveUpward(scope.row, scope.$index)"
              >上移</el-button
            >
            <el-button
              type="text"
              style="padding: 0"
              :disabled="scope.$index + 1 == schemas.length"
              @click="moveDown(scope.row, scope.$index)"
              >下移</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
2.相关方法
    /**
     * 表格字段上移方法
     */
    moveUpward(row, index) {
      // schemas 列数据
      if (index > 0) {
        let upData = this.schemas[index - 1];
        this.schemas.splice(index - 1, 1);
        this.schemas.splice(index, 0, upData);
        console.log("移动成功");
      } else {
        console.log("第一条数据");
        this.$message({
          message: "已经是第一条，上移失败",
          type: "error",
        });
      }
    },
3.表格字段下移方法
    /**
     * 表格字段下移方法
     */
    moveDown(row, index) {
      if (index + 1 == this.schemas.length) {
        this.$message({
          message: "已经是最后一条，下移失败",
          type: "error",
        });
      } else {
        let downData = this.schemas[index + 1];
        this.schemas.splice(index + 1, 1);
        this.schemas.splice(index, 0, downData);
      }
    },

效果图：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见

前端初见
关注
  • 4
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
vue Element ui实现table列拖动效果
11-07
1.附件内的源码是，是vue 和elementui实现table内的列可以随意拖拽的效果的代码。该代码在我的实际项目中已经应用。 2.table列的拖拽功能实现的核心就是改变 “表头列在数组中的位置”
elementui table列的拖拽功能
11-08
自己使用，该附件里的代码已经实现了使用vue 及elementui的table列的拖动功能。
el-table 实现行拖拽排序
最新发布
weixin_48305373的博客
04-19 461
默认拖拽时间鼠标右键不能复制文本，无法检索表单，不需要右键复制文本得可以不用，需要得表单里面这样写。切记必须使用row-key="id"必须添加，必须添加，必须添加不然会排序错乱。el-table 实现行拖拽排序，排序后更改背景色添加标记。使用 ref=“tableNodeTop”使用方法根据el-tabla组件。使用插件：Sortablejs。
el-table拖拽功能实现（3种详细解释）
qq_71214810的博客
12-22 5566
1.el-table自带的列宽拖拽 2.实现左右table宽度拖拽 3.利用第3方插件自由拖拽
【Vue】表格可拖拽滚动
weixin_43790653的博客
12-06 2158
Vue3使用Element-plus时如何实现表格可拖拽滚动
element el-table实现可进行横向拖拽滚动
我总是词不达意的博客
12-28 4390
el-table左右拖动，element el-table实现可进行横向拖拽滚动
el-table拖拽排序
蒙蒙细雨的博客
05-24 2178
拖拽排序 拖拽后 设置row-key,这里暂时用的id，id是他们的唯一标识，不能用index，index是会变的 //安装组件 cnpm install sortablejs --save //页面中引入 import Sortable from "sortablejs"; // 行拖拽 rowDrop() { this.$nextTick(() => { this.sortable1 = Sortable.create(
el-table实现拖拽效果
柒个橙子的博客
11-12 5580
一、概述 Sortable.js是一款优秀的js拖拽库，支持IE9及以上版本IE浏览器和现代浏览器，也可以运行在移动触摸设备中，不依赖jQuery，支持AngularJS、React、Vue框架和任何CSS库，如bootstrap、elementUI，可以用来拖拽div、table等元素。 二、安装插件 npm i -S vuedraggable vuedraggable依赖Sortable.js，我们可以直接引入Sortable使用Sortable的特性。 vuedraggable是Sortable的一
vue中 el-table 实现拖拽排序教程
CC酱写前端的博客
05-28 7672
el-table基础上如何实现表格上下拖拽排序 element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。 实现步骤： 1.安装Sortable.js npm install --save sortablejs 2.在当前vue中JS代码中引入： import Sortable from ‘sortablejs’ 3.在当前vue文件template el-table中指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。 注意：需要注
el-tabel实现拖拽排序
weixin_43422861的博客
11-28 1164
sortableJs
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
至于**列排序**，在`el-table`中，可以使用`sortable`属性来指定列是否可排序，而`sort-method`则用于自定义排序逻辑。默认情况下，`el-table`支持对数字和字符串进行升序或降序排序。如果你的数据结构不是JSON格式...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。 首先，ElementUI的`el-table`组件通常通过`<el-table-column>`标签来定义每一列的属性，如`prop`、`label`和`width`等。例如，以下是一个静态的表格列定义...
vue el-table实现行内编辑功能
10-15
首先，我们需要在`el-table`的表头部分自定义一个“新增”按钮，以便用户能够动态添加新的行数据。这可以通过使用`slot="header"`来完成。在`<template>`标签中定义一个按钮，绑定点击事件`@click`，当点击时调用...
el-table实现选择列显示.zip
04-07
- 其基本使用方式是通过`<el-table>`标签创建表格，并在其中嵌套`<el-table-column>`来定义每一列的属性，如字段名、标题、宽度等。 2. **选择列显示的需求分析** - 在某些场景下，用户可能希望根据自己的需求...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
el-table 实现列拖拽【干货满满】
Anonymous996的博客
01-05 2414
以上列出都不支持拖拽也不支持拖拽到这里，保证表格基本布局信息。 改动这个和上次一样，需要将el-table 源码拉出来，不使用extends方式，这是因为改不到子文件上去。前面步骤: 给el-table实现列显隐 项目中将抛出3个关联钩子 钩子 备注 描述 @header-cell-dragend=“headerCellDragend” 列宽被改动的钩子 column被拖拽 @table-ready=“tableReady” 初始化完成 可以对ElTable进行操作 @header-
vue+el-table行排序 【上移下移】【拖拽排序】
07-26 6781
安装vuedraggable。
el-table-draggable 首行行禁止拖拽
06-10
您好，针对您的问题，您可以通过设置el-table-draggable组件的handle参数来实现首行行禁止拖拽的效果。 具体做法是，在el-table-draggable组件中的列定义中，为第一列添加一个class名称，例如"first-column"，然后在el-table-draggable组件的handle参数中设置一个选择器，选择器为除了第一列之外的所有列，例如".el-table__body-wrapper .el-table__row:not(.first-column)"，即可实现首行行禁止拖拽的效果。 示例代码如下： ```html <el-table-draggable :data="tableData" :columns="tableColumns" :handle="'.el-table__body-wrapper .el-table__row:not(.first-column)'"></el-table-draggable> ``` 其中，tableData和tableColumns为数据和列定义，可根据实际情况进行替换。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端初见

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值