element表格(table)动态绑定样式(学习篇)

<div class="app-container">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" align="center">
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          <div :style="{background:scope.row.color,color:scope.row.sizeColor,fontSize:scope.row.fontSize}">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
    </el-table>
  </div>

这是接口请求打印出的数据，有字体大小，背景颜色，字体颜色

vue页面渲染效果如下