資訊專欄INFORMATION COLUMN
摘要：父組件定義表頭和表內(nèi)容表格數(shù)據(jù)表頭數(shù)據(jù)引入并注冊(cè)子組件注冊(cè)子組件獲取表頭和表內(nèi)容數(shù)據(jù)。
父組件
定義表頭和表內(nèi)容
data(){
return{
// 表格數(shù)據(jù)
tableColumns: [],
// 表頭數(shù)據(jù)
titleData:[],
}
}
引入并注冊(cè)子組件
import TableComponents from "../../components/table/table";
//注冊(cè)子組件table
components: {
tableC: TableComponents
},
獲取表頭和表內(nèi)容數(shù)據(jù)。（真實(shí)數(shù)據(jù)應(yīng)該是從接口獲取的，由于是測(cè)試數(shù)據(jù)這里我先寫死）
mounted() {
this.titleData =
[{
name:"日期",
value:"date"
},{
name:"姓名",
value:"name"
},{
name:"地址",
value:"address"
},{
name:"匯率",
value:"sharesReturn"
}];
this.tableColumns =
[{
date: "2016-05-01",
name: "王小虎1",
address: "上海市普陀區(qū)金沙江路 1518 弄",
sharesReturn: 0.03
}, {
date: "2016-05-02",
name: "王小虎2",
address: "上海市普陀區(qū)金沙江路 1517 弄",
sharesReturn: 0.04
}, {
date: "2016-05-03",
name: "王小虎3",
address: "上海市普陀區(qū)金沙江路 1519 弄",
sharesReturn: -0.01
}, {
date: "2016-05-04",
name: "王小虎4",
address: "上海市普陀區(qū)金沙江路 1516 弄",
sharesReturn: 0.00
}];
}
html代碼
子組件
js代碼
export default {
name: "tbComponents",
props: ["tableColumns","titleData"],
}
重點(diǎn)來了
html要怎么寫呢？官網(wǎng)的文檔是這么寫的
el-table :data關(guān)聯(lián)的是表格里的數(shù)據(jù)
el-table-column :prop關(guān)聯(lián)的是表頭的值 :label關(guān)聯(lián)的是表頭的文本
html動(dòng)態(tài)渲染
效果如下：
最后剩下一個(gè)功能，如果匯率大于0，則顯示紅色，小于0則顯示綠色
先貼上完整代碼：
0" style="color:red">{{scope.row[scope.column.property]}} {{scope.row[scope.column.property]}} {{scope.row[scope.column.property]}}
scope.row和scope.column分別代表什么呢？ 可以在界面輸出看看
先輸出scope.row
由此可見scope.row代表當(dāng)前行的數(shù)據(jù)
再來輸出scope.column
得到這樣一個(gè)對(duì)象，仔細(xì)看看，我們可以發(fā)現(xiàn)一點(diǎn)門路
由此可見scope.column.property代表當(dāng)前列的值
合并起來，當(dāng)前單元格的值應(yīng)該是scope.row[scope.column.property]
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106797.html
摘要：一封裝的組件定義表格高度全屏增加前臺(tái)分頁功能。表格內(nèi)編輯后，自動(dòng)選中該行。單元格內(nèi)數(shù)據(jù)樣式單元格內(nèi)按鈕，可多個(gè)。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱，按鈕樣式，按鈕事件標(biāo)識(shí)。單元格是否可點(diǎn)擊的判斷函數(shù)，可進(jìn)行復(fù)雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件： 定義表格高度全屏 增加前臺(tái)分頁功能。 自定義表頭，循環(huán)輸出整體表結(jié)構(gòu)。 表格內(nèi)編輯（輸入框...
摘要：獲取字符串中出現(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...
摘要：獲取字符串中出現(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...
閱讀 1250·2021-11-23 09:51
閱讀 687·2021-11-19 09:40
閱讀 1353·2021-10-11 10:58
閱讀 2362·2021-09-30 09:47
閱讀 3739·2021-09-22 15:55
閱讀 2174·2021-09-03 10:49
閱讀 1265·2021-09-03 10:33
閱讀 707·2019-08-29 17:12
