資訊專欄INFORMATION COLUMN
摘要：父組件定義表頭和表內容表格數據表頭數據引入并注冊子組件注冊子組件獲取表頭和表內容數據。
父組件
定義表頭和表內容
data(){
return{
// 表格數據
tableColumns: [],
// 表頭數據
titleData:[],
}
}
引入并注冊子組件
import TableComponents from "../../components/table/table";
//注冊子組件table
components: {
tableC: TableComponents
},
獲取表頭和表內容數據。（真實數據應該是從接口獲取的，由于是測試數據這里我先寫死）
mounted() {
this.titleData =
[{
name:"日期",
value:"date"
},{
name:"姓名",
value:"name"
},{
name:"地址",
value:"address"
},{
name:"匯率",
value:"sharesReturn"
}];
this.tableColumns =
[{
date: "2016-05-01",
name: "王小虎1",
address: "上海市普陀區金沙江路 1518 弄",
sharesReturn: 0.03
}, {
date: "2016-05-02",
name: "王小虎2",
address: "上海市普陀區金沙江路 1517 弄",
sharesReturn: 0.04
}, {
date: "2016-05-03",
name: "王小虎3",
address: "上海市普陀區金沙江路 1519 弄",
sharesReturn: -0.01
}, {
date: "2016-05-04",
name: "王小虎4",
address: "上海市普陀區金沙江路 1516 弄",
sharesReturn: 0.00
}];
}
html代碼
子組件
js代碼
export default {
name: "tbComponents",
props: ["tableColumns","titleData"],
}
重點來了
html要怎么寫呢？官網的文檔是這么寫的
el-table :data關聯的是表格里的數據
el-table-column :prop關聯的是表頭的值 :label關聯的是表頭的文本
html動態渲染
效果如下：
最后剩下一個功能，如果匯率大于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代表當前行的數據
再來輸出scope.column
得到這樣一個對象，仔細看看，我們可以發現一點門路
由此可見scope.column.property代表當前列的值
合并起來，當前單元格的值應該是scope.row[scope.column.property]
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106797.html
摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內編輯后，自動選中該行。單元格內數據樣式單元格內按鈕，可多個。觸發組件綁定函數，參數按鈕名稱，按鈕樣式，按鈕事件標識。單元格是否可點擊的判斷函數，可進行復雜的函數判斷。 vue-bxz-table 一、封裝element-ui的table組件： 定義表格高度全屏 增加前臺分頁功能。 自定義表頭，循環輸出整體表結構。 表格內編輯（輸入框...
摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...
摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...
閱讀 1233·2021-11-23 09:51
閱讀 678·2021-11-19 09:40
閱讀 1337·2021-10-11 10:58
閱讀 2347·2021-09-30 09:47
閱讀 3726·2021-09-22 15:55
閱讀 2160·2021-09-03 10:49
閱讀 1250·2021-09-03 10:33
閱讀 698·2019-08-29 17:12
