Vue 項(xiàng)目功能實(shí)現(xiàn)：Element UI 表格內(nèi)容格式化方案

luqiuwen 發(fā)布于2019-08-23 18:08 / 3442人閱讀

摘要：前言項(xiàng)目中經(jīng)常遇到表格內(nèi)容要根據(jù)接口數(shù)據(jù)格式化展示，比如接口返回時(shí)間戳格式，表格要展示為。下面介紹種格式化數(shù)據(jù)的方案并簡(jiǎn)述其使用場(chǎng)景，希望幫助大家在項(xiàng)目中可以準(zhǔn)確定位快速開(kāi)發(fā)。

前言

Vue 項(xiàng)目中經(jīng)常遇到表格內(nèi)容要根據(jù)接口數(shù)據(jù)格式化展示，比如：接口返回時(shí)間戳格式 1560565657109，表格要展示為 "2019.06.15 10:27:37"。下面介紹3種格式化數(shù)據(jù)的方案并簡(jiǎn)述其使用場(chǎng)景，希望幫助大家在項(xiàng)目中可以準(zhǔn)確定位快速開(kāi)發(fā)。

1. 表格列屬性 formatter

當(dāng)只需要對(duì)數(shù)值改變的情況時(shí)，可通過(guò) element-ui 表格列屬性 formatter 直接實(shí)現(xiàn)。

2. 標(biāo)簽 template

當(dāng)表格內(nèi)容根據(jù)接口數(shù)據(jù)需要進(jìn)行顏色等樣式上改變時(shí)，需要借助來(lái)實(shí)現(xiàn)。

3. 標(biāo)簽 template 配合和過(guò)濾器 filters

當(dāng)表格內(nèi)容急需要數(shù)據(jù)上的轉(zhuǎn)換又需要樣式改變時(shí)，需要和 Vue 的過(guò)濾器 filters 搭配實(shí)現(xiàn)。

參考：

Element UI 表格：https://element.eleme.cn/2.9/...

Vue 插槽：https://cn.vuejs.org/v2/guide...

Vue 過(guò)濾器：https://cn.vuejs.org/v2/guide...

GPU云服務(wù)器云服務(wù)器 element-ui element-ui dialog組件 VUE實(shí)現(xiàn)webrtc Vue實(shí)現(xiàn)分頁(yè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104720.html

相關(guān)文章

vue封裝element-ui的table組件,靈活配置表頭實(shí)現(xiàn)表格內(nèi)編輯，按鈕，鏈接等功能。

摘要：一封裝的組件定義表格高度全屏增加前臺(tái)分頁(yè)功能。表格內(nèi)編輯后，自動(dòng)選中該行。單元格內(nèi)數(shù)據(jù)樣式單元格內(nèi)按鈕，可多個(gè)。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱(chēng)，按鈕樣式，按鈕事件標(biāo)識(shí)。單元格是否可點(diǎn)擊的判斷函數(shù)，可進(jìn)行復(fù)雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件：定義表格高度全屏增加前臺(tái)分頁(yè)功能。自定義表頭，循環(huán)輸出整體表結(jié)構(gòu)。表格內(nèi)編輯（輸入框...

henry14 2019-08-26 13:30 評(píng)論0 收藏0
手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。完整項(xiàng)目地址：vue-element-admin 系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列...

Channe 2019-08-20 17:15 評(píng)論0 收藏0
手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。完整項(xiàng)目地址：vue-element-admin 系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列...

zgbgx 2019-08-29 12:46 評(píng)論0 收藏0
開(kāi)發(fā)中遇到的問(wèn)題總結(jié)

摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 評(píng)論0 收藏0
開(kāi)發(fā)中遇到的問(wèn)題總結(jié)

摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 評(píng)論0 收藏0