<template>
  <el-table-column
      :label="props.item.title"
      :prop="props.item.key"
      :width="props.item.width"
      :fixed="props.item.fixed"
      :type="props.item.type"
      :reserve-selection="props.item.type && props.item.type === 'selection'"
      show-overflow-tooltip>
    <template v-if="props.item.type && props.item.type === 'index' "
              #default="scope">
      {{ props.startIndex + scope.$index + 1 }}
    </template>
    <template v-if="props.item.cellRenderer"
              :key="item"
              #default="{row}">
      <component :is="props.item.cellRenderer({row, cellData: row[props.item.key]})"/>
    </template>
    <template v-if="props.item.children" v-for="ch in props.item.children">
      <xc-table-v3-column :item="ch" :start-index="startIndex"/>
    </template>
  </el-table-column>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object
  },
  startIndex: {
    type: Number
  }
})


</script>
