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.