创建表格渲染

export function createTable(list: any[], column: { prop: string; label: string}[]) {
  // 创建一个表格
  const table = document.createElement('table')
  table.setAttribute('id', 'table_box')
  // 创建表头
  const thead = document.createElement('thead')
  const thead_tr = document.createElement('tr')
  for (let i = 0; i < column.length; i++) {
    const item = column[i]
    const th = document.createElement('th')
    th.innerHTML = item.label
    thead_tr.appendChild(th)
  }
  thead.appendChild(thead_tr)
  table.appendChild(thead)
  // 创建表格主体
  const tbody = document.createElement('tbody')
  for (let i = 0; i < list.length; i++) { // 外面的for循环 是 行tr
    const item = list[i]
    const tr = document.createElement('tr')
    tbody.appendChild(tr)
    // 往tr每一行里面创建单元格
    // td单元格的数量取决 column
    // 面的for循环是 列
    for (let i = 0; i < column.length; i++) {
      const columnItem = column[i]
      if (item[columnItem.prop + '-span'] && item[columnItem.prop + '-span'].rowspan === 0) {
        continue
      }
      const td = document.createElement('td')
      if (item[columnItem.prop + '-span'] && item[columnItem.prop + '-span'].rowspan > 1) {
        td.setAttribute('rowspan', item[columnItem.prop + '-span'].rowspan)
      }
      if (columnItem.prop === 'user_name' || columnItem.prop === 'workTaskName') {
        td.setAttribute('class', 'table_props_center')
      }
      td.innerHTML = item[columnItem.prop]
      tr.appendChild(td)
    }
  }
  table.appendChild(tbody)
  return table
}