elementUi 中table表尾插入行的实例

更新时间：2022年07月29日 11:07:32 作者：蓝色的落叶

这篇文章主要介绍了elementUi 中table表尾插入行的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

elementUi table表尾插入行

<template>
  <div>
    <el-table stripe class="jx-table" :data="tableData" border ref="table" style="width: 100%">
      <el-table-column prop="firstColumn" :label="firstColLabel" :resizable="false"></el-table-column>
      <el-table-column prop="date" label="时间" :resizable="false"></el-table-column>
      <el-table-column prop="name" label="姓名" :resizable="false"></el-table-column>
      <el-table-column prop="province" label="地点" :resizable="false"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { map } from "lodash";
export default {
  created() {
    this.init();
  },
  data() {
    return {
      fullTableData: [],
      firstColLabel: "",
      tableFoot: [],
      allDate: {
        TabData: {
          result: [
            {
              date: "2016-05-02",
              name: "王小虎",
              province: "上海",
              firstColumn: 1
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              province: "上海",
             title: 12
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              province: "上海",
              title: 123
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              province: "上海",
              title: 124
            }
          ],
          avg: { date: "---", name: "--", province: "-" },
          count: { date: "_", name: "__", province: "___" }
        },
        csNick: "标题"
      }
    };
  },
  methods: {
    init() {
      const { result, avg, count } = this.allDate.TabData;
      this.fullTableData = map(result, (object, key) => {
        return {
          firstColumn: object.title,
          ...object
        };
      });
      count.firstColumn = "汇总";
      avg.firstColumn = "均值";
      this.tableFoot = [count, avg];
      this.firstColLabel = this.allDate.csNick;
    }
  },
  computed: {
    tableData() {
      const tbody = this.fullTableData;
      return tbody.length ? [...tbody, ...this.tableFoot] : [];
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

效果图如下：

element table 自定义表尾

简单介绍下项目：后端管理系统，页面样式用的是 element，数据绑定用的是 vue.js。

功能需求：需要添加缴药记录，这些记录要显示在一个 table 中，但是 table 末尾一行不做数据展示，只负责触发数据新增的动作。

先看最终实现的效果

红框处就是自定义的表尾，选择药品处的下拉框，每当选中一个药品的时候，当前 table 就多出一行选中过的药品信息。

实现过程

由于用到 element 的 table 标签，所以 table 的渲染，取决于 data 属性的值(tablelist)，代码如下

    
    <el-table  style="width: 1040px" :data="tablelist" border>
        <el-table-column  prop="drugName" label="药品名称" min-width="20%"> </el-table-column>
        <el-table-column prop="unit" label="用药规格" min-width="20%"> </el-table-column>
        <el-table-column  prop="stock" label="库存数量（本人）" min-width="20%"> </el-table-column>
        <el-table-column prop="number" label="缴存数量" min-width="20%"> </el-table-column>
    </el-table>

一开始的思路是，tablelist 中预制一条数据，然后做状态标识。当渲染 table 行的时候，根据状态标识，判断该行到底是添加上的数据，还是要触发添加操作的表尾。然后按照这个思路执行的结果是：

然后反思，发现原因。每次添加，都往 tablelist 数组后面添加一个元素，导致本来应该是表尾的那一行，跑到了上面。那继续解决问题，我想到了对 tablelist 排序，然后让表尾那一行每次排在数组最后一个位置。虽然实现了，但是弊端也很大。

每次排序都要涉及到数组遍历页面渲染，这些都是性能开销。
当我保存页面的数据的时候，我还需要对 tablelist 的数据做筛选，剔除掉表尾那行数据。总而言之，逻辑很复杂，然后我就想出了另外一种方法。

先看代码

    
    <el-table  style="width: 1040px" :data="tablelist.concat([{drugId:0}])" border>
        <el-table-column  prop="drugName" label="药品名称" min-width="20%"> </el-table-column>
        <el-table-column prop="unit" label="用药规格" min-width="20%"> </el-table-column>
        <el-table-column  prop="stock" label="库存数量（本人）" min-width="20%"> </el-table-column>
        <el-table-column prop="number" label="缴存数量" min-width="20%"> </el-table-column>
    </el-table>

首先，为了保证保存页面数据的时候，处理逻辑简单，只让 tablelist 存储需要提交到后台的数据。那么 table 表格末尾那一行的数据，怎么渲染上呢。在给 table 的 data 属性赋值的时候，调用 tablelist 的 concat()，方法。给 tablelist 再添加一个数组，该数组只有一个元素，就是用来渲染表尾的元素。这样就保证了提交到后台数据准确性，table 行数据排列的准确性以及表尾行始终固定。

小结一下：其实解决的方法很简单。第一，由于是表尾和其他行有区别，而且我们的业务逻辑是表尾数据不提交，所以想到两部分数据要做数据隔离。第二，table 渲染的时候，又需要两部分数据是一个整体，所以想到集合的相加。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现自定义颜色选择器
这篇文章主要为大家详细介绍了如何使用vue实现一个自定义颜色选择器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2025-04-04
Vue实现圆环进度条的示例
这篇文章主要介绍了Vue实现圆环进度条的示例，帮助大家更好的理解和使用前端框架进行开发，感兴趣的朋友可以了解下
2021-02-02
vue3 onMounted异步函数同步请求async/await实现
这篇文章主要为大家介绍了vue3 onMounted初始化数据异步函数/同步请求async/await实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
浅谈Vuejs Prop基本用法
本篇文章主要介绍了Vuejs Prop基本用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue.js实现价格计算器功能
这篇文章主要为大家详细介绍了Vue.js实现价格计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
Vue3新状态管理工具实例详解
Vue3公布曾经有一段时间了,它采纳了新的响应式零碎,而且构建了一套全新的 Composition API,下面这篇文章主要给大家介绍了关于Vue3新状态管理工具的相关资料,需要的朋友可以参考下
2022-03-03
vue实现倒计时功能
这篇文章主要为大家详细介绍了vue实现倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
Vue3项目搭建的详细过程记录
使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目脚手架,下面这篇文章主要给大家介绍了关于Vue3项目搭建的详细过程,需要的朋友可以参考下
2022-10-10
vue-extend和vue-component注册一个全局组件方式
这篇文章主要介绍了vue-extend和vue-component注册一个全局组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue中如何使用lodash的debounce防抖函数
防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次,在Vue中使用防抖函数可以避免在频繁触发的事件中重复执行操作,这篇文章主要介绍了vue中使用lodash的debounce防抖函数,需要的朋友可以参考下
2024-01-01