<template>
  <div class="supplier-list-table">
    <el-table
      class="data-table-list"
      ref="listTable"
      :key="tableKey"
      :data="list"
      :max-height="tableHeight"
      border
      fit
      highlight-current-row
      cell-class-name="col-table-item"
      @select="onTableColSelect"
      @select-all="onTableSelectAll"
      @selection-change="onTableSelectAll"
      @sort-change="onSortChange"
      style="width: 100%;">
<!--      <el-table-column type="selection" width="55"/>-->
      <el-table-column type="index" label="序号" prop="bankInfoId" align="center" width="60"/>
      <el-table-column label="银行全称" align="center" prop="bankName"/>
      <el-table-column label="银行简称" align="center" prop="bankCorpName"/>
      <el-table-column label="支行名称" align="center" prop="branchName"/>
      <el-table-column label="银行行号" align="center" prop="bankNo"/>

      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-edit" size="mini" @click="onTableCtrlRow(scope.row,'update')">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="onTableCtrlRow(scope.row,'del')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>


  export default {
    name: "dataTable",
    components: {

    },
    props: {
      tableHeight: {
        type:Number,
        default:null
      },
      list:{
        type:Array,
        default: function () {
          return []
        }
      },
      tableKey:{
        type:Number,
        default:0
      }
    },
    data() {
      return {

      }
    },
    computed: {},
    mounted() {
    },
    methods: {
      // 选中
      onTableColSelect(selection, row) {

      },
      onTableSelectAll(val) {

      },
      // 排序
      onSortChange(data) {
        const {column, prop, order} = data;
      },
      // 操作
      async onTableCtrlRow(item,type) {
        this.$emit('ctrlRow',item,type);
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .data-table-list {
    .col-status.disable {
      color: #e6a23c;
    }
  }

  .table-pagination {
    margin-top: 0;
    padding: 10px 20px;

    &.fixed {
      padding: 5px 20px;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1002;
    }
  }
</style>
