vue el-table によって返されるデータはオブジェクトであり、el-table テーブルの指定された位置には指定された値が表示され、el-table は異なるデータ ソースにバインドされます。

通常の 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')
    }
  }
}

最終的な効果

おすすめ

転載: blog.csdn.net/guojixin12/article/details/131002975