elementUI动态渲染表格数据

使用框架：elementUI

需求：根据所选择的条件进行动态生成表格

之前公司一个需求，根据所选择的条件（区域，岗位，职级），动态生成表格，要求是根据选择的区域生成N个table，再根据岗位或者职级动态渲染列，表格内金额可以编辑。 我想通过下面的demo讲一下我的实现思路。

效果如下图：

经分析讨论，请求及发送的数据结构如下图:

data:[{
    areaId:1-1,
    areaName: '北京',
    posts: [{
        postId: 2-1,
        postName: 'JAVA',
        ranks: [{
            rankId: 3-1,
            rankName: '初级'
        },{
            rankId: 3-2,
            rankName: '中级'
        }]
        ...
    }]
}]

elementUI-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 弄'
        }]

我的思路

区域，岗位及等级为Tree结构，我们可以通过Tree结构拿到所选Tree的Nodes和Keys，再通过循环进行重构，按照需求，以区域来渲染表格数量，第一列我们已经确认为岗位，表格的行数根据职位的数量来定，表格的列（Column）根据等级进行循环。每个单元格的价格通过areaId+postId+rankId来进行确认方便后续的回填，以下为代码：

        // 表格列
        this.columnList = []
        const tableList = []
        // 获取区域列表
        const areaList = getArrayId(list.areas, 'areaId', 'areaName')
        // 循环区域
        for (var i = 0; i < areaList.length; i++) {
            // 将后台数据进行平铺
          const params = combineArr(list.areas[i].areaId, list.areas[i].posts, 'rankId', 'rankName', 'postId')
          // 存储记录价格
          this.recordPrice.push(...params.priceList)
          // 获取职级列表
          const rankList = params.newArr
          // 获取岗位列表
          const postList = params.columsArr
          // 创建实例对象
          var obj = {}
          obj.areaId = areaList[i].areaId
          obj.areaName = areaList[i].areaName
          obj.posts = []
          // 循环等级
          for (var j = 0; j < rankList.length; j++) {
            var objitem = {}
            objitem.rankId = rankList[j].rankId
            objitem.rankName = rankList[j].rankName
            objitem.colums = []
            // 循环岗位
            for (var k = 0; k < postList.length; k++) {
              var rankobj = {}
              rankobj.postId = postList[k].postId
              // 判断价格是否存在不存在为空
              if (params.priceList.length !== 0) {
                const key = areaList[i].areaId + '' + rankList[j].rankId + postList[k].postId
                const targetItem = params.priceList.find(item => item.key === key)
                if (targetItem) {
                  rankobj.price = targetItem.price
                } else {
                  rankobj.price = ''
                }
              } else {
                rankobj.price = ''
              }
              objitem.colums.push(rankobj)
            }
            obj.posts.push(objitem)
          }
          tableList.push(obj)
        }
        // 过滤处表格数据
        this.tableList = tableList
        // 过滤出表格列数据
        postList.forEach(item => {
          const obj = {}
          obj.postId = item.postId
          obj.postName = item.postName
          this.columnList.push(obj)
        })

拿到了表格数据进行表格渲染

        <el-table :data="table.posts" border class="pricelist">
          <el-table-column :label="table.areaName">
            <el-table-column
              prop="rankName"
              label="单位:元"
              align="center"
            />
            <el-table-column v-for="(item, index) in columnList" :key="index" :label="item.postName" align="center">
              <template slot-scope="{row}">
                <el-input-number v-model="row.colums[index].price" placeholder="请输入金额" :controls="false" :precision="2" :min="0" />
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>

最后

这是我的实现思路，欢迎各位指教