el-table 動態生成多級表頭

html代碼:

<el-table
  v-loading="loading"
  :data="orgTableData"
  :header-cell-style="{'background':'#f5f7fa','color':'#666'}"
  stripe
  border
>
  <el-table-column
    prop="number"
    label="序號"
    width="80"
    type="index"
    align="center"
  />
  <template v-for="item in tableColumns">
    <el-table-column
      v-if="!item.children"
      :key="item.key"
      :label="item.name"
      :prop="item.key"
      show-overflow-tooltip
      :min-width="item.minWidth"
      :width="item.width"
      align="center">
    </el-table-column>
    <el-table-column
      v-else
      :key="item.key"
      :label="item.name"
      align="center">
    <el-table-column v-for="s_item in item.children" :key="s_item.key"
        :label="s_item.name"
        :prop="s_item.key"
        align="center">
      </el-table-column>
    </el-table-column>
  </template>
</el-table>

js代碼:

tableColumns: [
  { key: 'visitPersonCnt', name: '訪問(人)', minWidth: 90 },
  { key: 'visitCnt', name: '訪問(次)', minWidth: 90 },
  { key: 'caseSearchCnt', name: '案件搜索(次)', minWidth: 90 },
  { name: '自定義標籤',
    children: [
      { key: 'diyRemarkCnt', name: '訪問(次)', minWidth: 90 },
      { key: 'diyRemarkPassCnt', name: '通過(組)', minWidth: 90 },
      { key: 'diyRemarkNotPassCnt', name: '不通過(組)', minWidth: 95 }
    ] },
  { key: 'allEvidenceCheckCnt', name: '量刑參考訪問(次)', minWidth: 90 }
]

el-table 動態生成表頭 請參考鏈接:el-table 動態生成表頭

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章