vue元素-ui表格组件动态生成标题和数据 并修改单元格格式父子组件通信

父组件

定义标题和表格内容

data(){ return {//table data table column 3360[]，//header data titleData:[]，}}引入并注册子组件

从导入表组件'././components/table/table '；//注册子组件TableComponents : { tablec : TableComponents }，获取表头和表内容数据。(真正的数据要从界面获取，因为是测试数据，我先写下来。)

已安装(){此。titledata=[{name:' date '，value:'date' }，{ name:' name '，value:'name' }，{ name:' address '，value:'sharesReturn' }]，{。这个。表列=[{日期：' 2016-05-01 '，名称： '王小虎1 '，地址： '上海市普陀区金沙江路1518弄'，股份数： 0.03}，{日期：' 2016-05-02 '，名称： '王小虎2 '，地址： '上海市普陀区金沙江路1517弄'，股份回报330}html代码

Tablec : table columns=' table columns ' : title data=' title data '/Tablec子组件

javascript，javascript

导出默认值{name:' tbcomponents '，props 3360[' table columns '，' title data ']}是关键点

怎么写html？这是官网的文件说的

El-表：数据与表中的数据相关

El-table-column :prop与标题的值相关联，而：label与标题的文本相关联

Html动态呈现

El-table : data=' table columns ' style=' width : 100% ' El-table-column v-for='(item，key)in title data ' : key=' key ' : prop=' item。值' :标签='项目

最后，还有一个功能。如果汇率大于0，它将显示红色，如果小于0，它将显示绿色

首先粘贴完整的代码：

El-table : data=' tableColumns ' style=' width : 100% ' El-table-columns v-for='(item，key)in title data ' : key=' key ' : prop=' item . value ' : label=' item . name ' template slot-scope=' scope ' span v-if=' scope . column . property==' sharesReturn n ' scope . row[scope . columns . property]0 ' style=' color 33330row[scope . column . property]} }/span span v-else { { scope }。行[范围。列。属性]} }/span/template/El-table-column/El-table scope。行和范围。栏目分别代表什么？您可以查看界面输出

输出范围。第一行

可以看出，scope.row代表当前行的数据

然后输出范围.列

得到这样一个物体，仔细看看，我们就能找到一点办法

可以看出，scope.column.property表示当前列的值

合并后，当前单元格的值应为scope . row[scope . column . property]

摘要

以上是父子组件之间的通信，它动态生成头和数据，并修改边肖引入的单元格格式。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！