The normal el-table backend returns an array object: directly bind the data to the data, then bind the fields to the prop, and the table can be displayed automatically
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
But this time the data returned by the backend is like this
{ "code":"200",
"data":{
"compare_percent_second_year":"21.75",
"create_time":"2022-08-18 16:32:47",
"main_business_income_third_year":"9261750",
"rd_investment_total_third_year":"319170",
"update_time":"2022-08-18 16:32:47",
"compare_percent_first_year":"77.12",
"main_business_income_first_year":"7706268",
"main_business_income_second_year":"9938894",
"rd_investment_total_second_year":"292196",
"report_id":2261,
"mb_income_percent_first_year":"3.11",
"mb_income_percent_second_year":"2.94",
"rd_investment_total_first_year":"240000","id":292,
"compare_percent_third_year":"20.18",
"mb_income_percent_third_year":"3.45"
}
}But the required form is like this
So there is a problem, hey, there is no way to loop out, and then find this method in the document
Determine how much $index is now, and then assign a value. The approximate code is as follows
This is the top-to-bottom sorting of the Y axis, the index starts from 0
<el-table-column
:label="getDateYearTwo"
align="center"
>
<template slot-scope="{ row, column, $index }">
<span v-if="$index === 0">{
{ tableDataA.main_business_income_second_year }}</span>
<span v-else-if="$index === 1">{
{ tableDataA.rd_investment_total_first_year }}</span>
<span v-else-if="$index === 2">{
{ tableDataA.mb_income_percent_second_year }}</span>
<span v-else-if="$index === 3">{
{ tableDataA.compare_percent_second_year }}</span>
</template>
</el-table-column>And you can bind different data sources:
data is bound to tableDateA
In the first column, the left fixed table header written by myself is normally displayed
Starting from the second column, the data in tableDate is used, which is requested from the server
<el-table
:data="tableDateA"
style="width: 100%"
border
header-cell-class-name="header-style"
>
<el-table-column
prop="name"
/>
<el-table-column
label="国家级（个数）"
align="center"
>
<template slot-scope="{ row, column, $index }">
<span v-if="$index === 0">{
{ tableData.countryProductsNum }}</span>
<span v-else-if="$index === 1">{
{ tableData.countryOutputValue }}</span>
</template>
</el-table-column>
<el-table-column
label="省级（个数）"
align="center"
>
<template slot-scope="{ row, column, $index }">
<span v-if="$index === 0">{
{ tableData.cityProductsNum }}</span>
<span v-else-if="$index === 1">{
{ tableData.cityOutputValue }}</span>
</template>
</el-table-column>
<el-table-column
prop=""
label="市级（个数）"
align="center"
>
<template slot-scope="{ row, column, $index }">
<span v-if="$index === 0">{
{ tableData.cityProductsNum }}</span>
<span v-else-if="$index === 1">{
{ tableData.cityOutputValue }}</span>
</template>
</el-table-column>
<el-table-column
prop=""
label="累计"
align="center"
>
<template slot-scope="{ row, column, $index }">
<span v-if="$index === 0">{
{ tableData.totalProductsNum }}</span>
<span v-else-if="$index === 1">{
{ tableData.totalOutputValue }}</span>
</template>
</el-table-column>
</el-table>export default {
components: {
CardSection
},
mixins: [portraitsMixin],
data() {
return {
tableDateA: [
{
name: '新产品研发数量（个数）'
},
{
name: '新产品产值（亿元）'
}
],
tableData: {}
}
},
watch: {
orgCode: {
handler: function(newValue) {
this.BusinessPortraitsProductDevelopment(newValue)
},
immediate: true
}
},
methods: {
async BusinessPortraitsProductDevelopment(newValue) {
const { data } = await getBusinessPortraitsProductDevelopment({ orgCode: newValue })
this.tableData = data
console.log(this.tableData, 'shjagioha1')
}
}
}The final effect
