SOURCE

var Main = {
  data () {
    return {
      loading: false,
      tableData: [],
      tableColumn: [
        { type: 'checkbox', width: 60 },
        { type: 'index', title: 'Number', width: 80 },
       { field: 'date', title: 'ElTimePicker', width: 200, editRender: { name: 'ElTimePicker', props: { type: 'time', format: 'HH:mm' } } },
        { field: 'date1', title: 'DateTimePicker', width: 220, editRender: { name: 'ElDatePicker', props: { type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss' } } },
        { field: 'date5', title: 'ElTimeSelect', width: 200, editRender: { name: 'ElTimeSelect', props: { pickerOptions: { start: '08:30', step: '00:15', end: '18:30' } } } },
        { field: 'flag', title: 'ElSwitch', width: 100, editRender: { name: 'ElSwitch', type: 'visible' } },
        { field: 'rate', title: 'ElRate', width: 200, editRender: { name: 'ElRate', type: 'visible' } }
      ],
      restaurants: [
        { value: '前端', name: '前端' },
        { value: '后端', name: '后端' },
        { value: '开发', name: '开发' },
        { value: '测试', name: '测试' }
      ]
    }
  },
  created () {
    var list = [];
    for (var index = 0; index < 10; index++) {
      list.push({
        id: index + 10000,
        name: "test" + index,
        role: "developer",
        sex: "Man",
        age: 10,
        date: "2019-05-01",
        time: 1556677810888 + index * 500,
        region: "ShenZhen",
        address: "address abc" + index,
        flag:true,
        rate: 3
      });
    }
    this.tableData = list;
  },
  methods: {
    roleFetchSuggestions (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }
};
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/element-ui"></script>
<script src="//unpkg.com/vxe-table"></script>
<script src="//unpkg.com/vxe-table-plugin-element"></script>

<div id="app">
  <template>
    <div>
      <vxe-grid
          border
          show-overflow
          class="vxe-table-element"
          height="460"
          :loading="loading"
          :data="tableData"
          :columns="tableColumn"
          :edit-config="{trigger: 'click', mode: 'row'}"></vxe-grid>
    </div>
  </template>
</div>

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
@import url("//unpkg.com/vxe-table/lib/index.css");
@import url("//unpkg.com/vxe-table-plugin-element/dist/style.css");