chenhaodong / mew-iview

  <template>

      <div>

          <br><br><br><br><br>
          <Table border :columns="columns1" height="500" :data="data1"></Table>
          <br><br><br><br><br>
          <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
          <br><br><br><br><br>

      </div>

  </template>
  <script>

      export default {

          data () {
              return {

                  columns1: [

                      {

                          title: 'Name',

                          key: 'name',

                          align: 'center',
                          width: 200,
                          fixed: 'left'

                      },
                      {

                          title: 'Other',
                          align: 'center',
                          children: [
                              {
                                  title: 'Age',
                                  key: 'age',
                                  align: 'center',
                                  width: 200
                              },
                              {
                                  title: 'Address',
                                  align: 'center',
                                  children: [
                                      {
                                          title: 'Street',
                                          key: 'street',
                                          align: 'center',
                                          width: 200
                                      },
                                      {
                                          title: 'Block',
                                          align: 'center',
                                          children: [
                                              {
                                                  title: 'Building',
                                                  key: 'building',
                                                  align: 'center',
                                                  width: 200
                                              },
                                              {
                                                  title: 'Door No.',
                                                  key: 'door',
                                                  align: 'center',
                                                  width: 200
                                              }
                                          ]
                                      }
                                  ]
                              }
                          ]
                      },
                      {
                          title: 'Company',
                          align: 'center',
                          children: [
                              {
                                  title: 'Company Address',
                                  key: 'caddress',
                                  align: 'center',
                                  width: 200
                              },
                              {
                                  title: 'Company Name',
                                  key: 'cname',
                                  align: 'center',
                                  width: 200
                              }
                          ]
                      },
                      {
                          title: 'Gender',
                          key: 'gender',
                          align: 'center',
                          width: 200,

                          fixed: 'right',
                          // fixed: 'left'

                      }
                  ],

                  columns2: [
                      {
                          title: 'Name',
                          key: 'name',
                          width: 100,
                          fixed: 'left'
                      },
                      {
                          title: 'Age',
                          key: 'age',

                          width: 100,
                          fixed: 'right',
                          sortable: true

                      },
                      {
                          title: 'Province',
                          key: 'province',
                          width: 100
                      },
                      {
                          title: 'City',
                          key: 'city',
                          width: 100
                      },
                      {
                          title: 'Address',
                          key: 'address',
                          width: 200
                      },
                      {
                          title: 'Postcode',
                          key: 'zip',

                          width: 100

                      },
                      {
                          title: 'Action',
                          key: 'action',
                          fixed: 'right',
                          width: 120,
                          render: (h, params) => {
                              return h('div', [
                                  h('Button', {
                                      props: {
                                          type: 'text',
                                          size: 'small'
                                      }
                                  }, 'View'),
                                  h('Button', {
                                      props: {
                                          type: 'text',
                                          size: 'small'
                                      }
                                  }, 'Edit')
                              ]);
                          }
                      }
                  ],

                  data1: [],
                  data4: [

                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          province: 'America',
                          city: 'New York',
                          zip: 100000
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'Washington, D.C. No. 1 Lake Park',
                          province: 'America',
                          city: 'Washington, D.C.',
                          zip: 100000
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          province: 'Australian',
                          city: 'Sydney',
                          zip: 100000
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          province: 'Canada',
                          city: 'Ottawa',
                          zip: 100000

                      },
                      {

                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          province: 'America',
                          city: 'New York',
                          zip: 100000
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'Washington, D.C. No. 1 Lake Park',
                          province: 'America',
                          city: 'Washington, D.C.',
                          zip: 100000
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          province: 'Australian',
                          city: 'Sydney',
                          zip: 100000
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          province: 'Canada',
                          city: 'Ottawa',
                          zip: 100000

                      }

                  ]
              }
          },

          mounted () {
              const data = [];
              for (let i = 0; i < 100; i++) {
                  data.push({
                      key: i,
                      name: 'John Brown',
                      age: i + 1,
                      street: 'Lake Park',
                      building: 'C',
                      door: 2035,
                      caddress: 'Lake Street 42',
                      cname: 'SoftLake Co',
                      gender: 'M',
                  });

              }

              this.data1 = data;

          }

      }

  </script>