element ui el-table 动态表格合计行放在第一行设置第一行的样式

本文链接：https://blog.csdn.net/weixin_38547641/article/details/120207041

本文档记录了如何在ElementUI中实现动态表格的渲染，将合计行显示在表格的第一行，并处理单元格样式。通过示例代码展示了如何处理后台返回的数据结构，动态生成表头和表格内容，以及利用Vue的模板语法实现编辑功能。

摘要由CSDN通过智能技术生成

这篇文章主要讲element ui中动态表格的渲染，合计行放在表格第一行，以及设置第一行样式的问题，都是比较简单的问题，但是开发中经常遇到，算是做个记录

一、动态表格

1动态表格，如下图，红色部分是动态渲染的列
在这里插入图片描述
2下面是造的数据结构：list 是后台返回的数据，我们要对list进行拆分

let list = [
            {
              "id":1,"sku":"123","version":'v20210902001',state:'已确认',
              "itemVOList":[{"planDate":"2021-09-01","planQty":1},{"planDate":"2021-09-02","planQty":2},{"planDate":"2021-09-03","planQty":3},{"planDate":"2021-09-04","planQty":99},{"planDate":"2021-09-05","planQty":1},{"planDate":"2021-09-06","planQty":2},{"planDate":"2021-09-07","planQty":3}]
            },
            {
              "id":2,"sku":"123","version":'v20210902002',state:'未确认',
              "itemVOList":[{"planDate":"2021-09-01","planQty":4},{"planDate":"2021-09-02","planQty":5},{"planDate":"2021-09-03","planQty":6},{"planDate":"2021-09-04","planQty":99},{"planDate":"2021-09-05","planQty":1},{"planDate":"2021-09-06","planQty":2},{"planDate":"2021-09-07","planQty":3}]
            },
            {
              "id":3,"sku":"123","version":'v20210902003',state:'未确认',
              "itemVOList":[{"planDate":"2021-09-01","planQty":7},{"planDate":"2021-09-02","planQty":8},{"planDate":"2021-09-03","planQty":9},{"planDate":"2021-09-04","planQty":99},{"planDate":"2021-09-05","planQty":1},{"planDate":"2021-09-06","planQty":2},{"planDate":"2021-09-07","planQty":3}]
            },
            {
              "id":4,"sku":"123","version":'v20210902003',state:'未确认',
              "itemVOList":[{"planDate":"2021-09-01","planQty":71},{"planDate":"2021-09-02","planQty":81},{"planDate":"2021-09-03","planQty":91},{"planDate":"2021-09-04","planQty":99},{"planDate":"2021-09-05","planQty":1},{"planDate":"2021-09-06","planQty":2},{"planDate":"2021-09-07","planQty":3}]
            }
 ]
tableData = list.map(item => {
    let arr = item.itemVOList
    arr.forEach(it => {
      item[it.planDate] = {} // 将日期做 key 挂载在 tableData 列表外层
      item[it.planDate].planQty = it.planQty
    })
    return item
})

let timeArrList = list[0].itemVOList
for (const it of timeArrList) { // 取数据第一项的 itemVOList 属性值 遍历取 planDate 做表头
  let obj = {props:it.planDate, label: it.planDate}
  tableColumn.push(obj)
}
this.tableColumn = tableColumn 
this.tableData = tableData

3html结构如下

<el-table :data="tableData" >

     <el-table-column
        prop="version"
        label="版本"
        align="center"
        min-width="150"
      >
      </el-table-column>
      
      <el-table-column  prop="state" label="状态" align="center" min-width="140">
      </el-table-column>
      
  	  <el-table-column  prop="sku" label="SKU" align="center" min-width="140">
      </el-table-column>
      
     // 以下是循环渲染部分 
      <el-table-column v-for="(item, index) in tableColumn" :key="index" align="center" min-width="120">
        <template slot="header">
          <span>{{item.label}}</span>
        </template>
        <template slot-scope="scope">
          <el-input v-if="scope.row.editing" size="mini" v-model="scope.row[item.props].planQty"></el-input>
          <span v-else>{{scope.row[item.props].planQty}}</span>
        </template>
      </el-table-column>
 
 </el-table>