element table 自定義表尾

2021-10-02 22:18:24 字數 3603 閱讀 3135

簡單介紹下專案:後端管理系統,頁面樣式用的是 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

>

一開始的思路是,tablelist 中預製一條資料,然後做狀態標識。當渲染 table 行的時候,根據狀態標識,判斷該行到底是新增上的資料,還是要觸發新增操作的表尾。然後按照這個思路執行的結果是:

然後反思,發現原因。每次新增,都往 tablelist 陣列後面新增乙個元素,導致本來應該是表尾的那一行,跑到了上面。那繼續解決問題,我想到了對 tablelist 排序,然後讓表尾那一行每次排在陣列最後乙個位置。雖然實現了,但是弊端也很大。1,每次排序都要涉及到陣列遍歷頁面渲染,這些都是效能開銷。2,當我儲存頁面的資料的時候,我還需要對 tablelist 的資料做篩選,剔除掉表尾那行資料。總而言之,邏輯很複雜,然後我就想出了另外一種方法。

先看**

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

>

首先,為了保證儲存頁面資料的時候,處理邏輯簡單,只讓 tablelist 儲存需要提交到後台的資料。那麼 table **末尾那一行的資料,怎麼渲染上呢。在給 table 的 data 屬性賦值的時候,呼叫 tablelist 的 concat(),方法。給 tablelist 再新增乙個陣列,該陣列只有乙個元素,就是用來渲染表尾的元素。這樣就保證了提交到後台資料準確性,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...