通常の el-table バックエンドは配列オブジェクトを返します。データをデータに直接バインドし、フィールドを prop にバインドすると、テーブルが自動的に表示されます。
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 弄'
}]
ただし、今回バックエンドから返されるデータは次のようになります
{ "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"
}
}
ただし、必要なフォームは次のとおりです
問題が発生しました。ループアウトする方法がありません。ドキュメント内でこのメソッドを見つけてください。
現在の $index がどのくらいであるかを確認し、値を割り当てます。おおよそのコードは次のとおりです。
これは Y 軸の上から下への並べ替えであり、インデックスは 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>
また、さまざまなデータ ソースをバインドできます。
データは tableDateA にバインドされます
通常、最初の列には自分で書いた左側の固定表ヘッダーが表示されます
2 列目からは、サーバーから要求された tableDate のデータが使用されます。
<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')
}
}
}
最終的な効果