Vue Element-UI Table Components Dynamically generate heads and data and modify cell format parent child components

  • 的头像-Tumi
  • 39 day agopublish

Parent component

Defines the head and table content

 DATA () {RETURN {// Table Data TableColumns: [], // Header Data Titledata: [],}}   
Introduced and registered sub-components

Import TableComponents from “../../components/table/table”;// registered subcomponent TableComponents: {Tablec: TableComponents}}}}}}}}}}}}}}} {Tablec: TableComponents}}}}}}}}}}}}} {Tablec: TableComponents: {Tablec: TableComponents}} Content data. (Real data should be obtained from the interface, because it is test data here, I will write first)
   
mounted () {this.titledata = [{name: ‘Date) , Value: ‘Date’}, {Name: ‘Name’, Value: ‘Name’}, {Name: ‘Address’, Value: ‘Address’}, {Name: ‘Exchange Rate’, Value: ‘Shareesreturn’}] This.tableColumns = [{date: ‘2016-05-01’, name: ‘Wang Xiaohu 1’, Address: ‘Shanghai Putuo District Jinshajiang Road 1518, Shareesreturn: 0.03}, {DATE: ‘2016-05-02’, Name: ‘Wang Xiaohu 2’, Address: ‘Shanghai Putuo District Jinshajiang Road 1517, Shareesreturn: 0.04}, {Date:’ 2016-05-03 ‘, Name:’ Wang Xiaohu 3 ‘, Address:’ Shanghai Putuo District Jinshajiang Road 1519, Shareesreturn: -0.01}, {Date: ‘2016-05-04’, Name: ‘Wang Xiaohu 4’, Address: ‘Shanghai Putuo District Jinsha Jianglu 1516, ‘, Shareesreturn: 0.00}];}
HTML code

   

Children

JS code
     export default { Name: 'TBComponents, PROPS: [' TableColumns', 'Titledata'],} 

How to write HTML? The document of the official website is such a written

EL-TABLE: DATA association is the data in the table

EL-TABLE-COLUMN: PROP is associated The value of the header: Label is associated with the text
HTML dynamic rendering
   

The effect is as follows: vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

Lastle is left, if The exchange rate is greater than 0, then the red, less than 0 shows green

first posts full code:

      0 "> {{Scope.row [Scope.Column.property]}  
{scope.row [scope.column.property]}
{{scope.row [scope.column.property]}}

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

What is Scope.row and Scope.column? Can be Interface output to see

First output scope.row

can be seen that scope.row represents data of the current line
to output Scope
   To get such an object, take a closer look, we can find a point gate     <span v-else-if="scope.column.property==='sharesReturn'&&scope.row[scope.column.property] This shows  Scope.column.property  Represents the value of the current column  , the value of the current cell should be  scope.row [scope.column.property]   
Summary

The above is the Vue Element-UI Table component dynamically generated head and numbers for the small series.According to and modify the cell format of the father and child components, I hope to help everyone. If you have any questions, please leave a message, the small package will reply to everyone. Thank you very much for your support of Tumi Cloud Website!

If you think this article helps you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment