<template>
  <el-table ref="texttable" v-if="tabletata.length && tablecolcolumn.length" :max-height="maxheight" :data="tabletata" @selection-change="selectionchange" border highlight-current-row>
    <el-table-column v-if="selection.hideshow" type="selection" :width="selection.width" />
    <el-table-column v-for="(item, index) in tablecolcolumn" :key="index" :label="item.label" :min-width="item.minwidth" :align="item.align" show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{ scope.row[item.name] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'TextTable',
  props: {
    // table表格数据
    tabletata: {
      type: Array,
      default: () => {
        return []
      }
    },
    // table表格的最大高度
    maxheight: {
      type: [String, Number],
      default: '400'
    },
    // table表格复选款配置
    selection: {
      type: Object,
      default: () => {
        return {
          hideshow: false,
          width: '40'
        }
      }
    },
    // table表格列配置项
    // label: 列的label文字,
    // minwidth: 列的最小宽度,
    // align: 列中内容的对齐方式,
    // name: 列中要渲染的后的台接口字段名
    tablecolcolumn: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    // 复选框事件
    selectionchange(item) {
      this.$emit('selectionchange', item)
    }
  }
}
</script>
