快捷導(dǎo)航

elementUi 中table表尾插入行的實例

更新時間：2022年07月29日 11:07:32 作者：藍(lán)色的落葉

這篇文章主要介紹了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: "標(biāo)題"
      }
    };
  },
  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 自定義表尾

簡單介紹下項目：后端管理系統(tǒng)，頁面樣式用的是 element，數(shù)據(jù)綁定用的是 vue.js。

功能需求：需要添加繳藥記錄，這些記錄要顯示在一個 table 中，但是 table 末尾一行不做數(shù)據(jù)展示，只負(fù)責(zé)觸發(fā)數(shù)據(jù)新增的動作。

先看最終實現(xiàn)的效果

紅框處就是自定義的表尾，選擇藥品處的下拉框，每當(dāng)選中一個藥品的時候，當(dāng)前 table 就多出一行選中過的藥品信息。

實現(xiàn)過程

由于用到 element 的 table 標(biāo)簽，所以 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="用藥規(guī)格" min-width="20%"> </el-table-column>
        <el-table-column  prop="stock" label="庫存數(shù)量（本人）" min-width="20%"> </el-table-column>
        <el-table-column prop="number" label="繳存數(shù)量" min-width="20%"> </el-table-column>
    </el-table>

一開始的思路是，tablelist 中預(yù)制一條數(shù)據(jù)，然后做狀態(tài)標(biāo)識。當(dāng)渲染 table 行的時候，根據(jù)狀態(tài)標(biāo)識，判斷該行到底是添加上的數(shù)據(jù)，還是要觸發(fā)添加操作的表尾。然后按照這個思路執(zhí)行的結(jié)果是：

然后反思，發(fā)現(xiàn)原因。每次添加，都往 tablelist 數(shù)組后面添加一個元素，導(dǎo)致本來應(yīng)該是表尾的那一行，跑到了上面。那繼續(xù)解決問題，我想到了對 tablelist 排序，然后讓表尾那一行每次排在數(shù)組最后一個位置。雖然實現(xiàn)了，但是弊端也很大。

每次排序都要涉及到數(shù)組遍歷頁面渲染，這些都是性能開銷。
當(dāng)我保存頁面的數(shù)據(jù)的時候，我還需要對 tablelist 的數(shù)據(jù)做篩選，剔除掉表尾那行數(shù)據(jù)?？偠灾?，邏輯很復(fù)雜，然后我就想出了另外一種方法。

先看代碼

    
    <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="用藥規(guī)格" min-width="20%"> </el-table-column>
        <el-table-column  prop="stock" label="庫存數(shù)量（本人）" min-width="20%"> </el-table-column>
        <el-table-column prop="number" label="繳存數(shù)量" min-width="20%"> </el-table-column>
    </el-table>

首先，為了保證保存頁面數(shù)據(jù)的時候，處理邏輯簡單，只讓 tablelist 存儲需要提交到后臺的數(shù)據(jù)。那么 table 表格末尾那一行的數(shù)據(jù)，怎么渲染上呢。在給 table 的 data 屬性賦值的時候，調(diào)用 tablelist 的 concat()，方法。給 tablelist 再添加一個數(shù)組，該數(shù)組只有一個元素，就是用來渲染表尾的元素。這樣就保證了提交到后臺數(shù)據(jù)準(zhǔn)確性，table 行數(shù)據(jù)排列的準(zhǔn)確性以及表尾行始終固定。

小結(jié)一下：其實解決的方法很簡單。第一，由于是表尾和其他行有區(qū)別，而且我們的業(yè)務(wù)邏輯是表尾數(shù)據(jù)不提交，所以想到兩部分?jǐn)?shù)據(jù)要做數(shù)據(jù)隔離。第二，table 渲染的時候，又需要兩部分?jǐn)?shù)據(jù)是一個整體，所以想到集合的相加。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: