<template>

  <!-- 统计组件————动态表格 -->

  <div>

    <!-- 表格 -->

    <el-table

      v-loading="loading"

      :data="tableData"

      min-height="260"

      :height="height"

      style="width: 100%; margin-top: 10px"

      row-key="id"

      :header-cell-style="{ background: '#007bfc', color: '#fff' }"

      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"

      :cell-style="cellStyle"

      :border="border"

      stripe

      highlight-current-row

      @selection-change="handleSelectionChange"

      @sort-change="changeSort"

      @cell-click="clickCol"

    >

      <!-- 选中 -->

      <el-table-column v-if="select" type="selection" width="60" align="center">

      </el-table-column>

      <!-- 序号 -->

      <el-table-column

        v-if="pageNum || pageSize"

        label="序号"

        width="70"

        align="center"

        fixed

      >

        <template slot-scope="scope">

          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}

        </template>

      </el-table-column>

      <!-- 动态表格 -->

      <template v-for="v in tableTitle">

        <el-table-column

          v-if="v.dataItem"

          :sortable="custom ? custom : v.custom"

          :prop="v.dataItem"

          :label="v.dataName"

          :key="v.dataItem"

          row-key="sort"

          :min-width="v.width"

          align="center"

          :fixed="v.fixed"

          :show-overflow-tooltip="true"

          :formatter="v.formatter ? v.formatter : null"

        >

        </el-table-column>

        <!-- 操作 -->

        <el-table-column

          align="center"

          v-else-if="v.slot"

          :key="v.slot"

          :label="v.dataName"

          :width="v.width"

          fixed="right"

        >

          <slot

            :name="v.slot"

            slot-scope="{ row, $index }"

            :row="row"

            :index="$index"

          />

        </el-table-column>

      </template>

    </el-table>

  </div>

</template>

<script>

export default {

  name: "ComTable",

  props: [

    "tableData",

    "tableTitle",

    "show",

    "select",

    "pageNum",

    "pageSize",

    "tableCheck",

    "tableOpinion",

    "tableScore",

    "file",

    "showFileOperation",

    "custom",

    "cellStyle",

    "border",

    "height",

    "loading",

  ],

  data() {

    return {};

  },

  methods: {

    // 数据点击

    clickCol(row, column) {

      this.$emit("clickCol", row, column);

    },

    //操作方法

    ClickBtn(name, row) {

      this.$emit("ClickBtn", name, row);

    },

    // 选择项发生变化时触发

    handleSelectionChange(val) {

      this.multipleSelection = val;

      // console.log(this.multipleSelection);

      this.$emit("selectValue", val);

    },

    // 排序

    changeSort(val) {

      // console.log(val);

      this.$emit("changeSort", val);

    },

  },

};

</script>

<style lang="scss" scoped>

</style>