SOURCE

var Main = {
  data () {
    let  restaurants= ['前端', '后端', '开发', '测试']
    let sexList = [
      {label:'女', value: '0'},
      {label:'男', value: '1'}
    ]
    let sexGroupList = [
      {
        label: '分组1',
        options: [
          {
            label: '男',
            value: '1'
          }
        ]
      },
      {
        label: '分组2',
        options: [
          {
            label: '女',
            value: '0'
          }
        ]
      }
    ]
    let regionList = [
      {
        label:'值 1', 
        value: '1',
        children: [
          {label:'值 1-1', value: '11'},
          {label:'值 1-2', value: '12'}
        ]
      }
    ]
    let treeData = [{
        title: 'Node1',
        value: '0-0',
        key: '0-0',
        children: [{
          title: 'Child Node1',
          value: '0-0-0',
          key: '0-0-0'
        }]
      }, {
        title: 'Node2',
        value: '0-1',
        key: '0-1',
        children: [{
          title: 'Child Node3',
          value: '0-1-0',
          key: '0-1-0',
          disabled: true
        }, {
          title: 'Child Node4',
          value: '0-1-1',
          key: '0-1-1'
        }, {
          title: 'Child Node5',
          value: '0-1-2',
          key: '0-1-2'
        }]
      }]
    return {
      loading: false,
      tableData: [],
      tableColumn: [
        { type: 'checkbox', width: 60 },
        { type: 'seq', title: 'Number', width: 80 },
        { field: 'name', title: 'AInput', minWidth: 140, editRender: { name: 'AInput' } },
        { field: 'role', title: 'AAutoComplete', width: 160, editRender: { name: 'AAutoComplete', props: { dataSource: restaurants }, events: { search: this.roleSearchEvent } } },
        { field: 'age', title: 'AInputNumber', width: 160, editRender: { name: 'AInputNumber', props: { max: 35, min: 18 } } },
        { field: 'sex', title: 'ASelect', width: 140, editRender: { name: 'ASelect', options: sexList } },
        { field: 'sex1', title: 'ASelect', width: 160, editRender: { name: 'ASelect', options: sexList, props: { mode: 'multiple' } } },
        { field: 'sex2', title: 'ASelect', width: 140, editRender: { name: 'ASelect', optionGroups: sexGroupList } },
        { field: 'region', title: 'ACascader', width: 200, editRender: { name: 'ACascader', props: { options: regionList } } },
        { field: 'date7', title: 'ADatePicker', width: 140, editRender: { name: 'ADatePicker', props: { type: 'date', format: 'YYYY/MM/DD' } } },
        { field: 'date8', title: 'AMonthPicker', width: 140, editRender: { name: 'AMonthPicker' } },
        { field: 'date9', title: 'AWeekPicker', width: 140, editRender: { name: 'AWeekPicker' } },
        { field: 'date11', title: 'ARangePicker', width: 240, editRender: { name: 'ARangePicker' } },
        { field: 'date10', title: 'ATimePicker', width: 140, editRender: { name: 'ATimePicker' } },
        { field: 'attr1', title: 'ATreeSelect', width: 140, editRender: { name: 'ATreeSelect', props: { treeData: treeData } } },
        { field: 'attr2', title: 'ATreeSelect', width: 140, editRender: { name: 'ATreeSelect', props: { treeData: treeData, treeCheckable: true } } },
        { field: 'flag', title: 'ASwitch', width: 100, editRender: { name: 'ASwitch', type: 'visible' } },
        { field: 'rate', title: 'ARate', width: 200, editRender: { name: 'ARate', type: 'visible' } }
      ],
      restaurants: restaurants
    }
  },
  created () {
    var list = [];
    for (var index = 0; index < 10; index++) {
      list.push({
        id: index + 10000,
        name: "test" + index,
        role: "前端",
        sex: "0",
        sex1:['1'],
        sex2:'1',
        age: 10,
        region: ['1','12'],
        date7: moment('2019-11-01'),
        date8: moment('2019-11-03'),
        date9: moment('2019-11-05'),
        date10: moment('2019-11-09 10:30:30'),
        date11: [],
        attr1: '',
        attr1: [],
        flag:true,
        rate: 3
      });
    }
    this.loading = true
    setTimeout(() => {
      this.tableData = list;
      this.loading = false
    }, 500)
  },
  methods: {
    roleSearchEvent ({ row }, value) {
      let dataSource = this.restaurants.filter(option => option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1)
      this.tableColumn[3].editRender.props.dataSource = dataSource
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table-plugin-antd"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

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

@import url("https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.css");
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
@import url("https://cdn.jsdelivr.net/npm/vxe-table-plugin-antd/dist/style.css");