SOURCE

var Main = {
  data() {
    return {
      toolbar: {
        size: 'mini',
        id: '1',
        refresh: true,
        setting: {
          immediate: true
        }
      },
      tableColumn: [{
        type: 'index',
        width: 60
      },
      {
        field: 'name',
        title: '某某名称'
      },
      {
        field: 'name',
        title: '某某名称'
      },
      {
        field: 'name',
        title: '某某名称'
      },
      {
        field: 'sex',
        title: 'Sex',
        cellRender: {
          name: 'select',
          options: [{
            value: 'Man',
            label: '男'
          }]
        }
      }],
      tableData: []
    }
  },
  created() {
    var list = []
    for (var index = 0; index < 100; index++) {
      list.push({
        id: index + 10000,
        checked: false,
        name: 'test' + index,
        role: 'developer',
        sex: 'Man',
        date: '2019-05-01',
        time: 1556677810888 + index * 500,
        region: 'ShenZhen',
        address: 'address abc' + index
      })
    }
    this.tableData = list
  },
  methods: {
    cellClickEvent({
      row
    }) {
      console.log(row)
    },
    footerMethod({
      columns,
      data
    }) {
      return [columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '和值'
        }
        if (['age', 'rate'].includes(column.property)) {
          return XEUtils.sum(data, column.property)
        }
        return '-'
      })]
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<script src="//unpkg.com/vue">
</script>
<script src="//unpkg.com/xe-utils">
</script>
<script src="//unpkg.com/vxe-table/lib/index.js">
</script>
<div id="app">
  <template>
    <div>
      <p>
        vxe-grid 配置式表格 动态列
      </p>
      <vxe-grid height="300" :columns="tableColumn" :data.sync="tableData" :toolbar="toolbar">
      </vxe-grid>
    </div>
  </template>
</div>

@import url("//unpkg.com/vxe-table/lib/index.css");