测试后的iview的表格

<template>

  <GPage bg>

    <div>

      <div class="table">

        <Button class="button"

                @click="add">Add</Button>

        <Table :columns="columns"

               :data="data"

               class="table-fixbug"></Table>

      </div>

    </div>

  </GPage>

</template>

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      columns: [

        {

          type: 'selection',

          width: 60,

          align: 'center'

        },

        {

          title: '姓名',

          key: 'name',

          render: (h, { row, index }) => {

            return h('Input', {

              props: {

                value: row.name

              },

              on: {

                input: val => {

                  this.data[index].name = val

                }

              }

            })

          }

        },

        {

          title: '爱好',

          key: 'hobby',

          render: (h, { row, index }) => {

            return h('Select', {

              props: {

                value: row.hobby

              },

              on: {

                'on-select': val => {

                  this.data[index].hobby = val

                }

              }

            },

            this.options.map(item => {

              return h('Option', {

                props: {

                  value: item,

                  label: item

                }

              })

            })

            )

          }

        },

        {

          title: '职业',

          key: 'job',

          render: (h, { row, index }) => {

            return h('Input', {

              props: {

                value: row.job

              },

              on: {

                input: val => {

                  this.data[index].job = val

                }

              }

            })

          }

        },

        {

          title: 'operation',

          key: 'operation',

          render: (h, { row, index }) => {

            return h(

              'a',

              {

                on: {

                  click: () => {

                    this.data.splice(index, 1)

                  }

                }

              },

              'Delete'

            )

          }

        }

      ],

      data: [

        {

          name: '',

          hobby: '',

          job: ''

        }

      ],

      options: ['电影', '游戏', '看书']

    }

  },

  methods: {

    add () {

      const addData = {

        name: '',

        hobby: '',

        job: ''

      }

      this.data.push(addData)

    }

  }

}

</script>

<style lang="less" scoped>

.table {

  text-align: left;

}

.button {

  margin-bottom: 20px;

}

.table-fixbug {

  overflow: visible;

}

</style>