簡單介紹下專案：後端管理系統，頁面樣式用的是 element，資料繫結用的是 vue.js。
功能需求：需要新增繳藥記錄，這些記錄要顯示在乙個 table 中，但是 table 末尾一行不做資料展示，只負責觸發資料新增的動作。
先看最終實現的效果：
紅框處就是自定義的表尾，選擇藥品處的下拉框，每當選中乙個藥品的時候，當前 table 就多出一行選中過的藥品資訊。
實現過程：
由於用到 element 的 table 標籤，所以 table 的渲染，取決於 data 屬性的值(tablelist)，**如下
一開始的思路是，tablelist 中預製一條資料，然後做狀態標識。當渲染 table 行的時候，根據狀態標識，判斷該行到底是新增上的資料，還是要觸發新增操作的表尾。然後按照這個思路執行的結果是：style="width
: 1040px
" :data
="tablelist"
border
>
prop
="drugname"
label
="藥品名稱"
min-width
="20%"
>
el-table-column
>
prop
="unit"
label
="用藥規格"
min-width
="20%"
>
el-table-column
>
prop
="stock"
label
="庫存數量（本人）"
min-width
="20%"
>
el-table-column
>
prop
="number"
label
="繳存數量"
min-width
="20%"
>
el-table-column
>
el-table
>
然後反思，發現原因。每次新增，都往 tablelist 陣列後面新增乙個元素，導致本來應該是表尾的那一行，跑到了上面。那繼續解決問題，我想到了對 tablelist 排序，然後讓表尾那一行每次排在陣列最後乙個位置。雖然實現了，但是弊端也很大。1，每次排序都要涉及到陣列遍歷頁面渲染，這些都是效能開銷。2，當我儲存頁面的資料的時候，我還需要對 tablelist 的資料做篩選，剔除掉表尾那行資料。總而言之，邏輯很複雜，然後我就想出了另外一種方法。
先看**
首先，為了保證儲存頁面資料的時候，處理邏輯簡單，只讓 tablelist 儲存需要提交到後台的資料。那麼 table **末尾那一行的資料，怎麼渲染上呢。在給 table 的 data 屬性賦值的時候，呼叫 tablelist 的 concat()，方法。給 tablelist 再新增乙個陣列，該陣列只有乙個元素，就是用來渲染表尾的元素。這樣就保證了提交到後台資料準確性，table 行資料排列的準確性以及表尾行始終固定。style="width
: 1040px
" :data
="tablelist.concat()"
border
>
prop
="drugname"
label
="藥品名稱"
min-width
="20%"
>
el-table-column
>
prop
="unit"
label
="用藥規格"
min-width
="20%"
>
el-table-column
>
prop
="stock"
label
="庫存數量（本人）"
min-width
="20%"
>
el-table-column
>
prop
="number"
label
="繳存數量"
min-width
="20%"
>
el-table-column
>
el-table
>
總結其實解決的方法很簡單。第一，由於是表尾和其他行有區別，而且我們的業務邏輯是表尾資料不提交，所以想到兩部分資料要做資料隔離。第二，table 渲染的時候，又需要兩部分資料是乙個整體，所以想到集合的相加。
多思考，總會有意想不到的收穫。
簡單介紹下專案：後端管理系統，頁面樣式用的是 element，資料繫結用的是 vue.js。
功能需求：需要新增繳藥記錄，這些記錄要顯示在乙個 table 中，但是 table 末尾一行不做資料展示，只負責觸發資料新增的動作。
先看最終實現的效果：
紅框處就是自定義的表尾，選擇藥品處的下拉框，每當選中乙個藥品的時候，當前 table 就多出一行選中過的藥品資訊。
實現過程：
由於用到 element 的 table 標籤，所以 table 的渲染，取決於 data 屬性的值(tablelist)，**如下
style="width
: 1040px
" :data
="tablelist"
border
>
prop
="drugname"
label
="藥品名稱"
min-width
="20%"
>
el-table-column
>
prop
="unit"
label
="用藥規格"
min-width
="20%"
>
el-table-column
>
prop
="stock"
label
="庫存數量（本人）"
min-width
="20%"
>
el-table-column
>
prop
="number"
label
="繳存數量"
min-width
="20%"
>
el-table-column
>
el-table
>
element table自定義樣式
現有需求如下 表頭的下邊框為預設實現，除表頭外的下線框為虛線，並且第一列的資料有下劃線 element ui 官網提供了各種方法其中 cell style可以自定義單元格的樣式，可以在定義表的時候寫入定義樣式函式為 rowstyle 然後在methods中定義方法，返回樣式物件 rowstyle e...
自定義 如何自定義協議
何為自定義協議，其實是相對標準協議來說的，這裡主要針對的是應用層協議 常見的標準的應用層協議如http ftp smtp等，如果我們在網路通訊的過程中不去使用這些標準協議，那就需要自定義協議，比如我們常用的rpc框架 dubbo，thrift 分布式快取 redis，memcached 等都是自定義...
自定義控制項 自定義鐘錶
private context mcontext 畫筆 private paint mpaint 控制項的寬 private int mwidth x方向的圓心座標 private int center 鐘錶的半徑 private int mradio 圓環的寬 private int stroke...