摘要：父组件定义表头和表内容表格数据表头数据引入并注册子组件注册子组件获取表头和表内容数据。
父组件
定义表头和表内容
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]
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/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...
阅读 1229·2021-11-23 09:51
阅读 676·2021-11-19 09:40
阅读 1336·2021-10-11 10:58
阅读 2346·2021-09-30 09:47
阅读 3723·2021-09-22 15:55
阅读 2158·2021-09-03 10:49
阅读 1250·2021-09-03 10:33
阅读 697·2019-08-29 17:12
