<template>
  <div style="height:432px;width:800px;">
    <stabilityTable ref="stabiltyTable" :columns="columns" :dataSource="rows"></stabilityTable>
  </div>
</template>

<script>
import 'vue-stability-table/dist/style.css'
import vueStabilityTable from 'vue-stability-table'

export default {
  components: { vueStabilityTable },
  data () {
    return {
      columns: [],
      rows: []
    }
  },
  created () {
    let columns = [{
      label: '固定列asadfasdfas',
      prop: 'table',
      fixed: true,
      width: 120,
      className: 'table-1',
      sortable: true,
      resizable: true
    }, {
      label: '固定列2',
      prop: 'fixedTable2',
      fixed: true,
      width: 120,
      resizable: true
    }]
    
    for (let i = 0; i <= 300; i++) {
      columns.push({
        label: '表头' + i,
        prop: 'table' + i,
        subProp: 'subTable' + i,
        resizable: true,
        sortable: true,
        formatter: function(str) {
          return str + 'bba'
        }
      })
    }

    columns.push({
      label: '固定尾1',
      prop: 'tableLast',
      fixed: true,
      width: 120,
      resizable: true,
      sortable: true,
      align: 'center'
    },{
      label: '固定尾2',
      prop: 'tableLast2',
      fixed: true,
      width: 120,
      resizable: true,
      sortable: true,
      align: 'right'
    })

    let rows = []
    for (let i = 0; i < 1000; i++) {
      let obj = {
        id: i,
        table: '是否' + i,
        fixedTable2: '收到',
        table1: i,
        table2: i,
        subTable1: '20%',
        children: []
      }
      for (let j = 0; j < 7; j++) {
        obj.children.push({
          id: i + 'ch' + j,
          fixedTable2: '2021111' + j,
          table1: '爱爱上爱上爱上爱上上',
          table2: 'asfasdasfasdfsffsfasfasdasfasdfsffsf'
        })
      }
      rows.push(obj)
    }
    this.columns = columns
    this.rows = rows
  }
}
</script>