El backend normal de el-table devuelve un objeto de matriz: vincule directamente los datos a los datos, luego vincule los campos al accesorio y la tabla se puede mostrar automáticamente
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 弄'
}]
Pero esta vez los datos devueltos por el backend son así
{ "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"
}
}
Pero el formulario requerido es así.
Entonces hay un problema, oye, no hay forma de salir y luego encontrar este método en el documento
Determine cuánto es $index ahora y luego asigne un valor. El código aproximado es el siguiente
Esta es la clasificación de arriba a abajo del eje Y, el índice comienza desde 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>
Y puede vincular diferentes fuentes de datos:
los datos están vinculados a tableDateA
En la primera columna, normalmente se muestra el encabezado de la tabla fija izquierda escrito por mí mismo
A partir de la segunda columna, se utilizan los datos de tableDate, que se solicitan al servidor
<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')
}
}
}
el efecto final