<template>
  <a-table
    :pagination="{
      'show-less-items':true,
      'show-quick-jumper':true,
      'hideOnSinglePage':true
    }"
    :rowKey="(record,index)=>{return index}"
    :data-source="dataSource">
    <a-table-column key="sort" title="序号">
      <template slot-scope="text,record,index">
        <span>
          {{ ++index }}
        </span>
      </template>
    </a-table-column>
    <a-table-column-group>
      <span slot="title">属性名称</span>
      <a-table-column key="1" data-index="attrName.before">
        <span slot="title">变更前</span>
      </a-table-column>
      <a-table-column
        key="11"
        title="变更后"
        data-index="attrName.after"
      />
    </a-table-column-group>
    <a-table-column-group>
      <span slot="title">属性排序</span>
      <a-table-column key="2" data-index="attrSort.before">
        <span slot="title">变更前</span>
      </a-table-column>
      <a-table-column
        key="21"
        title="变更后"
        data-index="attrSort.after"
      />
    </a-table-column-group>
    <a-table-column-group>
      <span slot="title">属性描述</span>
      <a-table-column key="3" data-index="attrDesc.before">
        <span slot="title">变更前</span>
      </a-table-column>
      <a-table-column
        key="31"
        title="变更后"
        data-index="attrDesc.after"
      />
    </a-table-column-group>
    <a-table-column-group>
      <span slot="title">数据长度</span>
      <a-table-column key="4" data-index="dataLength.before">
        <span slot="title">变更前</span>
      </a-table-column>
      <a-table-column
        key="41"
        title="变更后"
        data-index="dataLength.after"
      />
    </a-table-column-group>
    <a-table-column key="tableattrStatus" title="数据表状态" data-index="tableattrStatus">
      <template slot-scope="text">
        <span>
          {{ text===0?'已创建' : text===1?' 未创建' : '已变更未同步' }}
        </span>
      </template>
    </a-table-column>
  </a-table>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      dataSource: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        filteredTags: [],
        tagsFilterDropdownVisible: false
      }
    }
  }
</script>

<style scoped>

</style>
