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+
    2022-10-19
  • vue使用el-table动态合并列及行
    本文实例为大家分享了vue使用el-table动态合并列及行的具体代码,供大家参考,具体内容如下 前两天项目中需要用到表单合并,特此记录,放便以后使用。 首先我使用的element-...
    99+
    2022-11-12
  • 使用Vue怎么动态生成表格的行和列
    这篇文章将为大家详细讲解有关使用Vue怎么动态生成表格的行和列,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。具体的实现代码如下:<template&g...
    99+
    2022-10-19
  • 如何使用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
  • Vue中table如何实现动态表格td可编辑
    这篇文章主要介绍Vue中table如何实现动态表格td可编辑,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!项目中需求用到可编辑表格下图这种 ↓element UI 组件table表格...
    99+
    2022-10-19
  • vue如何用DataTable插件实现表格动态刷新
    今天小编给大家分享一下vue如何用DataTable插件实现表格动态刷新的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。我这边...
    99+
    2023-07-04
  • Vue中如何使用ElementUi同时校验多个表单
    小编给大家分享一下Vue中如何使用ElementUi同时校验多个表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码let&n...
    99+
    2022-10-19
  • vue中elementUI如何使用tabs与导航栏联动
    这篇文章主要介绍了vue中elementUI如何使用tabs与导航栏联动,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。不使用tabs标签页时...
    99+
    2022-10-19
  • 如何使用html5实现表格实现标题合并
    这篇文章给大家分享的是有关如何使用html5实现表格实现标题合并的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用html5实现表格实现标题合并的实例代码这样的需求不在少数,比如表格中相邻的列具有相同的内容,那么...
    99+
    2023-06-09
  • 如何使用Vue动态生成form表单
    这篇文章将为大家详细讲解有关如何使用Vue动态生成form表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、...
    99+
    2022-10-19
  • 如何利用JS动态生成隔行换色HTML表格
    这篇文章将为大家详细讲解有关如何利用JS动态生成隔行换色HTML表格,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。用JS生成动态生成表格,行、列由用户输入,并使表格隔行换...
    99+
    2022-10-19
  • 如何使用SpringAop动态获取mapper执行的SQL并保存SQL到Log表中
    本文小编为大家详细介绍“如何使用SpringAop动态获取mapper执行的SQL并保存SQL到Log表中”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何使用SpringAop动态获取mapper执行的SQL并保存SQL到Log表中”文...
    99+
    2023-07-05
  • Vue 3.0 中如何使用动态组件
    这篇文章给大家介绍Vue 3.0 中如何使用动态组件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、组件注册1.1 全局注册在 Vue 3.0 中,通过使用 app 对象的 comp...
    99+
    2022-10-19
  • 如何使用MySQL和JavaScript创建一个动态数据表格
    要创建一个动态数据表格,可以通过以下步骤使用MySQL和JavaScript:1. 首先,创建一个MySQL数据库并创建一个数据表。...
    99+
    2023-10-20
    MySQL
  • 使用SpringAop动态获取mapper执行的SQL,并保存SQL到Log表中
    目录1.背景2.难点3.实现3.1ModelSumbit.java3.2LogAdvice.java3.3SqlUtils.java4.注意事项总结1.背景 工作的时候遇到一个这样的...
    99+
    2023-03-07
    SpringAop动态获取SQL mapper执行SQL 保存SQL到Log表
  • 我们如何使用 MySQL TRIM() 删除所有行中的空格并更新表?
    假设如果一个表中有许多值在表的列中包含空格,那么这是浪费空间。我们可以使用 TRIM() 函数从所有行中删除空格并在单个查询中更新表。按照“Employee”的示例,所有行中都有空格将展示这一概念 -示例mysql> Sele...
    99+
    2023-10-22
  • mybatis-plus在Mapper类中使用@select标签进行多表联合动态条件查询
    单表动态条件查询 1)单字段作为参数 直接用@param设置的值作为注入就好了 @Select("select * from ppms_person_message wher ...
    99+
    2023-10-20
    mybatis java mysql
  • 如何解析Vue中动态组件怎么使用
    如何解析Vue中动态组件怎么使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。动态组件在开发的过程中大多数情况下都会用到,当我们需要在不同的组件之间进行状态切换时,动态组件...
    99+
    2023-06-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作