Parent component

Define table headers and table contents

data(){
  return{
    // Tabular data
    tableColumns: [],
    // Header data
    titleData:[],
  }
}

Introducing and registering subcomponents

import TableComponents from "../../components/table/table";



//Register subcomponent table
components: {
    tableC: TableComponents
},

Get table header and table content data. (Real data should be retrieved from the interface, since it's test data, I'll write it to death first.)

mounted() {
    this.titleData =  
        [{
            name:'date',
            value:'date'
        },{
            name:'Full name',
            value:'name'
        },{
            name:'address',
            value:'address'
        },{
            name:'exchange rate',
            value:'sharesReturn'
        }];

    this.tableColumns = 
        [{
            date: '2016-05-01',
            name: 'Wang Xiao Hu 1',
            address: '1518 lane, Jinsha River Road, Putuo District, Shanghai',
            sharesReturn: 0.03
        }, {
            date: '2016-05-02',
            name: 'Wang Xiao Hu 2',
            address: '1517 lane of the market',
            sharesReturn: 0.04
        }, {
            date: '2016-05-03',
            name: 'Wang Xiao Hu 3',
            address: '1519 lane of the market',
            sharesReturn: -0.01
        }, {
            date: '2016-05-04',
            name: 'Wang Xiao Hu 4',
            address: '1516 lane of the market',
            sharesReturn: 0.00
        }];
}

html code

<tableC :tableColumns="tableColumns" :titleData="titleData" ></tableC>

Sub components

js code

export default {
  name: 'tbComponents',
  props: ['tableColumns','titleData'],
}

The key is coming.
How to write html? This is how the official website documents are written.

El-table: Data is associated with data in a table
El-table-column: prop associates the value of the header: label associates the text of the header

html dynamic rendering

<el-table :data="tableColumns" style="width: 100%">
  <el-table-column v-for="(item,key) in titleData" :key="key" :prop="item.value" 
    :label="item.name"></el-table-column>
</el-table>

The results are as follows:

The last remaining function is to show red if the exchange rate is greater than 0 and green if the exchange rate is less than 0.

First paste the complete code:

<el-table :data="tableColumns" style="width: 100%">
    <el-table-column v-for="(item,key) in titleData" :key="key" :prop="item.value" :label="item.name">
        <template slot-scope="scope">
          <span v-if="scope.column.property==='sharesReturn'&&scope.row[scope.column.property]>0" style="color:red">{{scope.row[scope.column.property]}}</span>
          <span v-else-if="scope.column.property==='sharesReturn'&&scope.row[scope.column.property]<0" style="color: #37B328">{{scope.row[scope.column.property]}}</span>
          <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
    </el-table-column>
</el-table>

What do scope.row and scope.column stand for? You can look at the output of the interface.
Output scope.row first

Thus, scope.row represents the data of the current row.

Output scope.column

To get such an object, look carefully, we can find a way out.

Thus, scope.column.property represents the value of the current column.

Combined, the current cell value should be scope.row[scope.column.property]

If you have any questions, you are welcome to discuss them together.