iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中如何使用elementUI表格动态行合并
  • 573
分享到

vue中如何使用elementUI表格动态行合并

vue使用elementUIvue elementUI表格elementUI表格动态行合并 2022-11-13 18:11:22 573人浏览 独家记忆
摘要

目录Vue 使用elementUI表格动态行合并需求背景vue elementUI动态删除表格当前行内容具体步骤实现方法vue 使用elementUI表格动态行合并 需求背景 在开发

vue 使用elementUI表格动态行合并

需求背景

开发中又是表格合并的行数并不是固定的行数,需要根据接口返回的数据来动态合并需要合并的行数

html代码:

<el-table
        :data="tableData"
        border
        :span-method="objectSpanMethod"
      >
        <el-table-column label="前面" align="center">
          <el-table-column prop="inquiryCode" label="id" align="center" />
          <el-table-column prop="phoneNumber" label="1" align="center" />
          <el-table-column prop="createTime" label="2" align="center" />
          <el-table-column prop="createTime" label="3" align="center" />
          <el-table-column prop="contractCount" label="4" align="center" />
        </el-table-column>
        <el-table-column label="中间" align="center">
          <el-table-column prop="bankName" label="6" align="center" />
          <el-table-column prop="acceptanceAmount" label="7" align="center" />
          <el-table-column prop="dueTime" label="8" align="center" />
          <el-table-column prop="dueDay" label="9" align="center" />
          <el-table-column prop="interestAmount" label="10" align="center" />
        </el-table-column>
        <el-table-column label="总计" align="center">
          <el-table-column prop="cashPayAmount" label="11" align="center" />
          <el-table-column prop="acceptanceAllAmount" label="12" align="center" />
          <el-table-column prop="payAllAmount" label="13" align="center" />
          <el-table-column prop="interestAllAmount" label="14" align="center" />
        </el-table-column>
      </el-table>

js代码:(注意:此处我是根据接口返回的inquiryCode是否相同来确实是否需要合并,你如果是其他字段自行更改)

export default {
  data() {
    return {
      tableData: [],
      spanArr: [],
     }
  },
  mounted() {
    this.rowspan();
  },
  methods: {
    rowspan() {
      // 每次调用清空数据
      this.spanArr = []
      this.position = 0
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
        } else {
          // inquiryCode 为需要合并查询的项
          if (this.tableData[index].inquiryCode === this.tableData[index - 1].inquiryCode) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 || columnIndex === 13) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
  }
}

效果截图:

vue elementUI动态删除表格当前行内容

具体步骤

第一步:拿到当前行数据的索引

第二部:绑定函数置删除键将拿到的数据索引通过请求发送给后端

第三部,调用获取数据借口(这样就不用删除数据后还要再次刷新页面,用户体验会更好)

实现方法

首先获取将要被删除行的数据索引 

    <el-card class="box-card">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100% "
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="学号" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" align="center"></el-table-column>
        <el-table-column prop="college" label="学院" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope" class="active">
            <el-button @click="editData(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button @click="removeData(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20">
        <el-col :span="6" :offset="12">
          <div class="block">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, next, jumper, pager"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>

在这一步中,获取当行数据使用的方法是 scope.row.id 。这将把当行数据的id传递给删除函数

接下来就是删除函数的逻辑实现了

在这一步中需要注意的是,请求成功后应该调用一次获取数据列表的函数,否则需要刷行页面才看得到删除的效果

removeData(id) {
      //提示框,判断用户是否操作失误
      this.$confirm("此操作将永久删除此学生, 是否继续?", "警告", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const data = { id }; //这里<=>data = {id:id}
          axiOS
            .post("URL", data)
            .then(response => {
              this.fetchdata(); //删除数据后重新获取数据
            })
            .catch(() => {
              this.$message({
                type:"warning",
                message:"请求失败,请检查网络设置"
              })
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中如何使用elementUI表格动态行合并

本文链接: https://www.lsjlt.com/news/169649.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中如何使用elementUI表格动态行合并
    目录vue 使用elementUI表格动态行合并需求背景vue elementUI动态删除表格当前行内容具体步骤实现方法vue 使用elementUI表格动态行合并 需求背景 在开发...
    99+
    2022-11-13
    vue使用elementUI vue elementUI表格 elementUI表格动态行合并
  • vue中elementUI table如何实现自定义表头和行合并
    这篇文章主要介绍vue中elementUI table如何实现自定义表头和行合并,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、自定义表头代码如下,其实就是分了两部分,表格主数据是...
    99+
    2024-04-02
  • el-table表格动态合并行及合并行列实例详解
    目录前言1、合并行2、合并行列总结前言 在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下: 而我们想要的数据...
    99+
    2022-11-13
    el-table动态合并单元格 el-table合并列 el table合并行
  • vue使用el-table动态合并列及行
    本文实例为大家分享了vue使用el-table动态合并列及行的具体代码,供大家参考,具体内容如下 前两天项目中需要用到表单合并,特此记录,放便以后使用。 首先我使用的element-...
    99+
    2024-04-02
  • vue+elemet实现表格手动合并行列
    本文实例为大家分享了vue+elemet实现表格手动合并行列的具体代码,供大家参考,具体内容如下 1.初始化一个element的table表格,选中一个单元格选择合并行和列,参考el...
    99+
    2024-04-02
  • vue elementui表格如何获取某行数据
    这篇文章主要讲解了“vue elementui表格如何获取某行数据”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue elementui表格如何获取某行数据”吧!效果图...
    99+
    2023-07-05
  • element表格行列的动态合并示例详解
    目录效果图代码详解数据结构行合并列合并完整代码+注释效果图 合并行 合并列 element的table提供了合并行或者列的方法,并且有一个示例,传送入口:element.elem...
    99+
    2024-04-02
  • 使用Vue怎么动态生成表格的行和列
    这篇文章将为大家详细讲解有关使用Vue怎么动态生成表格的行和列,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。具体的实现代码如下:<template&g...
    99+
    2024-04-02
  • 如何使用Python对Excel表格进行拼接合并
    目录准备工作一、横向拼接1.1 一般拼接1.2 指定键进行拼接,即指定某一列作为两个表的连接依据。1.2.1 多对一1.2.2 多对多1.2.3 用on来指定多个连接键1.2.4&n...
    99+
    2023-03-22
    Python Excel表格拼接 Python Excel表格合并
  • Vue动态生成表格的行和列如何实现
    本篇内容主要讲解“Vue动态生成表格的行和列如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue动态生成表格的行和列如何实现”吧!具体的实现代码如下:<template>&n...
    99+
    2023-07-04
  • 如何在python中合并表格
    今天就跟大家聊聊有关如何在python中合并表格,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。python可以做什么Python是一种编程语言,内置了许多有效的工具,Python几乎...
    99+
    2023-06-14
  • Vue中怎么利用ElementUI实现表单动态渲染
    本篇文章为大家展示了Vue中怎么利用ElementUI实现表单动态渲染,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。{  "inline&quo...
    99+
    2024-04-02
  • 基于Vue+elementUI如何实现动态表单的校验功能
    小编给大家分享一下基于Vue+elementUI如何实现动态表单的校验功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言开发...
    99+
    2024-04-02
  • Vue中table如何实现动态表格td可编辑
    这篇文章主要介绍Vue中table如何实现动态表格td可编辑,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!项目中需求用到可编辑表格下图这种 ↓element UI 组件table表格...
    99+
    2024-04-02
  • 如何使用Vue动态生成form表单
    这篇文章将为大家详细讲解有关如何使用Vue动态生成form表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、...
    99+
    2024-04-02
  • vue如何用DataTable插件实现表格动态刷新
    今天小编给大家分享一下vue如何用DataTable插件实现表格动态刷新的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。我这边...
    99+
    2023-07-04
  • vue中elementUI如何使用tabs与导航栏联动
    这篇文章主要介绍了vue中elementUI如何使用tabs与导航栏联动,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。不使用tabs标签页时...
    99+
    2024-04-02
  • vue中table表头单元格合并(附单行、多级表头代码)
    目录问题描述原生table知识点复习原生表格demo合并单元格规律结论el-table单层表头合并案例案例一案例二案例三案例四el-table多级表头合并案例案例五案例六总结问题描述...
    99+
    2023-05-16
    vue table表头单元格合并 vue 表头单元格合并 vue单元格合并
  • Vue中使用elementui与Sortable.js实现列表拖动排序
    本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码,供大家参考,具体内容如下 一、安装使用Sortable.js 1、安装 cnpm ins...
    99+
    2024-04-02
  • Vue中如何使用ElementUi同时校验多个表单
    小编给大家分享一下Vue中如何使用ElementUi同时校验多个表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码let&n...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作