<template>
  <div>
    <div class="tabBox" style="margin-top: 0px;height:320px !important;">

      <el-table ref="multipleTableRef" stripe :data="tableData" style="width: 100%" v-loading="tableloading"
        element-loading-text="数据加载中..." height="30vh" @selection-change="handleSelectionChange" border>
        <el-table-column label="开始时间" property="startDate">
        </el-table-column>
        <el-table-column label="结束时间" prop="finshDate">
        </el-table-column>
        <el-table-column label="培训项目名称" property="planName">
        </el-table-column>
        <el-table-column label="主办部门" property="planHostsDeptName">
        </el-table-column>
        <el-table-column label="操作" prop="signState">
          <template #default="{ row }">
            <span class="operate">详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance, watchEffect } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  id: String,
  tableData: {
    type: Array,
    default: []
  },
  pxsstype: String
});

const tableloading = ref(false)
const tableData = ref([])
watchEffect(() => {
  tableData.value = props.tableData

});
onMounted(() => {

})



</script>
<style lang="scss" scoped>
.top-box {
  display: flex;
  justify-content: space-between;
  padding: 10px;

  .top-box-left {
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    >span {
      color: #000;
    }
  }
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.el-form {
  width: 80vw;
  margin: 0px auto;
  flex-wrap: wrap;
  justify-content: space-between;

}

.el-form-item {
  text-align: center;
}
</style>