前端动态渲染表格的行和列

之前做的一个页面是动态的渲染表格，未知的是行和列，我们要根据后台返回的信息来进行渲染，因为写过两次，但是道理都大同小异，第一次是同时请求两个接口，然后第一个接口返回的是表头，第二次是表值。

<el-table-column prop="bindSubjectName" label="主体" align="center" min-width="120" />
<el-table-column v-for="item in dynamicTableList" :key="item.byCalculateItem + `${ Math.random() }`" :prop="item.byCalculateItem" :label="item.byCalculateName" align="center" width="180">
  	<template slot-scope="scope">
       <span> {{ scope.row[item.byCalculateItem] }}</span>
    </template>
</el-table-column>

可以看出我开始用的是两个list table用了一个 然后下面循环的每一列用了一个 然后得到的值就是显示的那个值

<el-table-column prop="name" label="交易对" width="180" />
   <el-table-column v-for="(item, index) in minData" :key="index" :label="guankou" class-name="selectChange">
     <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.dataList[index].calMessage || '未计算' " placement="top">
              <div class="bgColor1" v-if="scope.row.dataList[index].calStatus == null || 0">{{ scope.row.dataList[index].gateName }}</div>
              <div class="bgColor2" v-if="scope.row.dataList[index].calStatus == 1 ">{{ scope.row.dataList[index].gateName }}</div>
              <div class="bgColor3" v-if="scope.row.dataList[index].calStatus == -1 ">{{ scope.row.dataList[index].gateName }}</div>
          </el-tooltip>
      </template>
   </el-table-column>

看这段代码也可以看出来 使用了两个list

**数据格式**
	list = [ { name: '标题' ，children: [ {数据} {数据} ]} ]

大部分是个 这个是一个计算轮询。点击计算 然后开始计算。计算成功弹出这个框，里面计算成功为一种颜色 失败 还有未计算， 这个数据是根据计算得来的 关口和 里面的交易都是不知道的 都是得到的。 大部分都是看上面的代码就可以知道是怎么做的