摘要:前言項目中經(jīng)常遇到表格內(nèi)容要根據(jù)接口數(shù)據(jù)格式化展示,比如接口返回時間戳格式,表格要展示為。下面介紹種格式化數(shù)據(jù)的方案并簡述其使用場景,希望幫助大家在項目中可以準確定位快速開發(fā)。
前言
Vue 項目中經(jīng)常遇到表格內(nèi)容要根據(jù)接口數(shù)據(jù)格式化展示,比如:接口返回時間戳格式 1560565657109,表格要展示為 "2019.06.15 10:27:37"。下面介紹3種格式化數(shù)據(jù)的方案并簡述其使用場景,希望幫助大家在項目中可以準確定位快速開發(fā)。
1. 表格列屬性 formatter當只需要對數(shù)值改變的情況時,可通過 element-ui 表格列屬性 formatter 直接實現(xiàn)。
2. 標簽 template
當表格內(nèi)容根據(jù)接口數(shù)據(jù)需要進行顏色等樣式上改變時,需要借助 來實現(xiàn)。
3. 標簽 template 配合和過濾器 filters= 60 ? "green" : "red" }"> {{ scope.row.scores }}
當表格內(nèi)容急需要數(shù)據(jù)上的轉(zhuǎn)換又需要樣式改變時,需要 和 Vue 的過濾器 filters 搭配實現(xiàn)。
{{ scope.row.gender | genderFormatter }}
參考:
Element UI 表格:https://element.eleme.cn/2.9/...
Vue 插槽:https://cn.vuejs.org/v2/guide...
Vue 過濾器:https://cn.vuejs.org/v2/guide...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/104720.html
摘要:一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內(nèi)編輯后,自動選中該行。單元格內(nèi)數(shù)據(jù)樣式單元格內(nèi)按鈕,可多個。觸發(fā)組件綁定函數(shù),參數(shù)按鈕名稱,按鈕樣式,按鈕事件標識。單元格是否可點擊的判斷函數(shù),可進行復雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件: 定義表格高度全屏 增加前臺分頁功能。 自定義表頭,循環(huán)輸出整體表結(jié)構(gòu)。 表格內(nèi)編輯(輸入框...
摘要:社區(qū)的認可目前已經(jīng)是相關最多的開源項目了,體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:社區(qū)的認可目前已經(jīng)是相關最多的開源項目了,體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 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...
摘要:獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 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...
閱讀 1816·2019-08-30 13:54
閱讀 2730·2019-08-29 17:27
閱讀 1116·2019-08-29 17:23
閱讀 3355·2019-08-29 15:20
閱讀 1231·2019-08-29 11:28
閱讀 1575·2019-08-26 10:39
閱讀 1321·2019-08-26 10:29
閱讀 646·2019-08-26 10:13