
<template>
  <el-table
    :data="tableData"
    style="width: 100%;"
    class="cj_table"
    :stripe="stripe"
    :max-height="tableHeight"
    :header-cell-style="headerCellStyle"
  >
    <el-table-column
      v-if="isIndex" 
      type="index" 
      :label="indexLabel" 
      width="65" 
      align="left"
    >
      <!-- 序号 -->
    </el-table-column>
    <template v-for="(item,index) in tableHeader.value" :key="'header-' + index">
      <!-- 嵌套表头 -->
      <MyTableColumn
        v-if="item.children && item.children.length"
        :coloumnHeader="item"
      ></MyTableColumn>
      <el-table-column
        v-else
        :label="item.label"
        :prop="item.prop"
        header-align="center"
        :align="item.align"
        :width="item.width"
      ></el-table-column>
    </template>
  </el-table>
</template>

<script setup>
import MyTableColumn from "./MyTableColumn.vue";
const props = defineProps({
  tableHeight: {
    type: Number,
    default: 384
  }, // 表格最大高度，超出显示滚动条
  tableHeader: {
    type: Object,
    default: () => {}
  }, // 表头
  tableData: {
    type: Array,
    default: () => []
  }, // 表格数据
  isIndex: {
    type: Boolean,
    default: false
  }, // 显示序号
  indexLabel: {
    type: String,
    default: "序号"
  }, // 序号label
  stripe: {
    type: Boolean,
    default: false
  }, // 斑马纹
});
const headerCellStyle = (row) => {
  return {
    'border-top': '2px solid #b0bee8',
    'border-bottom': '1px solid #b0bee8'
  }
  
}
</script>


<style>
.cj_table .el-table__cell {
  padding: 12px 0;
  color: #202531;
}
.cj_table thead.is-group {
  /* border: 1px solid #b0bee8; */
  color: #202531;
  font-weight: 700;
}
.cj_table thead.is-group tr:last-child th{
  border-top: none!important;
}
.cj_table thead.is-group tr th:last-child{
  border-right: 1px solid #b0bee8!important;
}
.cj_table .el-table__header-wrapper .el-table__header {
  border-left: 1px solid #b0bee8;
}
.cj_table thead.is-group th.el-table__cell {
  background-color: #dfe5f6!important;
  border-color: #b0bee8!important;
}
.cj_table .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #f7f7f9;
}
</style>