<!--
 * @Author: your name
 * @Date: 2021-09-28 13:56:49
 * @LastEditTime: 2021-12-21 14:32:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hyyfClient\src\components\newTable\TableContent.vue
-->
<template>
  <div class="table-content">
    <el-table
      :data="listData"
      border
      :height="height"
      @selection-change="handleSelectionChange"
      :empty-text="emptyText"
    >
      <el-table-column v-if="shows.showSelect" type="selection" align="center">
      </el-table-column>

      <el-table-column
        v-if="shows.showIndex"
        type="index"
        label="序号"
        align="center"
        width="70"
      >
      </el-table-column>

      <template v-for="item in tableItems">
        <el-table-column :key="item.prop" v-bind="item" align="center">
          <template slot-scope="scope">
            <slot :name="item.slotName" :row="scope.row">
              {{ scope.row[item.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    listData: {
      type: Array,
      required: true,
    },
    height: {
      // 表格高度控制
      type: Number,
      default: 500,
    },
    tableItems: {
      type: Array,
      required: true,
    },
    shows: {
      type: Object,
      default: () => ({ showIndex: true, showSelect: true }),
    },
    emptyText: {
      type: String,
      default: "暂无数据",
    },
  },
  methods: {
    handleSelectionChange(rows) {
      this.$emit("selectionChange", rows);
    },
  },
};
</script>
<style scoped></style>
