簡單介紹下項目：後端管理系統，頁面樣式用的是 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 排序，然後讓表尾那一行每次排在數組最後一個位置。雖然實現了，但是弊端也很大。1，每次排序都要涉及到數組遍歷頁面渲染，這些都是性能開銷。2，當我保存頁面的數據的時候，我還需要對 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 渲染的時候，又需要兩部分數據是一個整體，所以想到集合的相加。
多思考，總會有意想不到的收穫。
