<template>
  <div>
    <!--
      tableAll:{
        stripe: false, // 是否带有斑马框
        border: false, // 是否带有纵向边框
        size: ‘‘, // table的尺寸可以没有 medium / small / mini        lightRow: false, // 是否高亮当前行
        tableData: [],
        tableList: [
          {
            prop: ‘‘, // 绑定的数据
            label: ‘‘, // 标题
            type: ‘‘, // selection(多选框)/index(索引)/expand(可展开按钮)
            fixed: ‘‘, // left, right 列是否固定在左侧或者右侧
          }
        ],
        btn: [
          {
            title: ‘修改‘,
            type: ‘primary‘,
            size: ‘mini‘,
            icon: ‘el-icon-edit‘
          },
          {
            title: ‘删除‘,
            type: ‘danger‘,
            size: ‘mini‘,
            icon: ‘el-icon-delete‘
          }
        ]
      }
    -->
    <el-table
      :data="tableAll.tableData"
      style="width: 100%"
      :stripe="tableAll.stripe"
      :border="tableAll.border"
      :highlight-current-row="tableAll.lightRow"
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column
        v-for="(item, key) in tableAll.tableList"
        :key="key"
        :prop="item.prop"
        :label="item.label"
        :type="item.type"
        :fixed="item.fixed"
        align="center"
      />
      <el-table-column
        v-if="tableAll.btn.length !== 0"
        label="操作"
        align="center"
      >
        <template slot-scope="Scope">
          <el-button
            v-for="(btn, index) in tableAll.btn"
            :key="index"
            :type="btn.type"
            :size="btn.size"
            :icon="btn.icon"
            @click="btnClick(Scope.row, btn.title)"
          >{{ btn.title }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // tableData: {
    //   type: Array,
    //   default: () => []
    // },
    tableAll: {
      type: Object,
      default: () => {}
    } // table的所有数据
  },
  methods: {
    // 复选框发生改变
    select(selection, row) {
      this.$emit(‘select‘, selection, row)
    },
    // 全选
    selectAll(selection) {
      this.$emit(‘selectAll‘, selection)
    },
    // 按钮事件 按钮的名称 就是按钮的类别
    btnClick(row, type) {
      this.$emit(‘btnClick‘, row, type)
    }
  }
}
</script>

element ui table 二次封装