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 自定義表尾
簡單介紹下項目:后端管理系統(tǒng),頁面樣式用的是 element,數(shù)據(jù)綁定用的是 vue.js。
功能需求:需要添加繳藥記錄,這些記錄要顯示在一個 table 中,但是 table 末尾一行不做數(shù)據(jù)展示,只負責觸發(fā)數(shù)據(jù)新增的動作。
先看最終實現(xiàn)的效果
紅框處就是自定義的表尾,選擇藥品處的下拉框,每當選中一個藥品的時候,當前 table 就多出一行選中過的藥品信息。
實現(xiàn)過程
由于用到 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="用藥規(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)標識。當渲染 table 行的時候,根據(jù)狀態(tài)標識,判斷該行到底是添加上的數(shù)據(jù),還是要觸發(fā)添加操作的表尾。然后按照這個思路執(zhí)行的結(jié)果是:
然后反思,發(fā)現(xiàn)原因。每次添加,都往 tablelist 數(shù)組后面添加一個元素,導(dǎo)致本來應(yīng)該是表尾的那一行,跑到了上面。那繼續(xù)解決問題,我想到了對 tablelist 排序,然后讓表尾那一行每次排在數(shù)組最后一個位置。雖然實現(xiàn)了,但是弊端也很大。
- 每次排序都要涉及到數(shù)組遍歷頁面渲染,這些都是性能開銷。
- 當我保存頁面的數(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ù)準確性,table 行數(shù)據(jù)排列的準確性以及表尾行始終固定。
小結(jié)一下:其實解決的方法很簡單。第一,由于是表尾和其他行有區(qū)別,而且我們的業(yè)務(wù)邏輯是表尾數(shù)據(jù)不提交,所以想到兩部分數(shù)據(jù)要做數(shù)據(jù)隔離。第二,table 渲染的時候,又需要兩部分數(shù)據(jù)是一個整體,所以想到集合的相加。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3中使用vuedraggable實現(xiàn)拖拽el-tree數(shù)據(jù)分組功能
這篇文章主要介紹了vue3中使用vuedraggable實現(xiàn)拖拽el-tree數(shù)據(jù)分組功能,可以實現(xiàn)單個拖拽、雙擊添加、按住ctrl鍵實現(xiàn)多個添加,或者按住shift鍵實現(xiàn)范圍添加,添加到框中的數(shù)據(jù),還能拖拽排序,需要的朋友可以參考下2024-02-02Vue向后臺傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實例
這篇文章主要介紹了Vue向后臺傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決
這篇文章主要介紹了vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07