vue el-table返回的数据是个对象，el-table表格指定位置显示指定值，el-table绑定不同数据源。

正常el-table后端给返回的是数组对象:直接data绑定数据，然后prop绑定字段，table表格就可以自动展示了

 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>

 而且可以绑定不同数据源：

data绑定了tableDateA

第一个column里面正常把自己写的左侧固定表头展示了

从第二个column开始，就开始使用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')
    }
  }
}

最后实现的效果