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'}
        ]
      }
    ]
    return {
      loading: false,
      tableData: [],
      tableColumn: [
        { type: 'checkbox', width: 60 },
        { type: 'index', title: 'Number', width: 80 },
        { field: 'name', title: 'Number', minWidth: 140, editRender: { name: 'Input' } },
        { field: 'role', title: 'AutoComplete', width: 160, editRender: { name: 'AutoComplete', props: { data: restaurants, filterMethod: this.roleFilterMethod } } },
        { field: 'age', title: 'InputNumber', width: 160, editRender: { name: 'InputNumber', props: { max: 35, min: 18 } } },
        { field: 'sex', title: 'Select', width: 140, editRender: { name: 'Select', options: sexList } },
        { field: 'sex1', title: 'Select', width: 160, editRender: { name: 'Select', options: sexList, props: { multiple: true, clearable: true } } },
        { field: 'sex2', title: 'Select', width: 140, editRender: { name: 'Select', optionGroups: sexGroupList, props: { clearable: true } } },
        { field: 'region', title: 'Cascader', width: 200, editRender: { name: 'Cascader', props: { data: regionList } } },
        { field: 'date', title: 'DatePicker', width: 200, editRender: { name: 'DatePicker', props: { type: 'date', format: 'yyyy/MM/dd' } } },
        { field: 'date1', title: 'TimePicker', width: 200, editRender: { name: 'TimePicker', props: { type: 'time' } } },
        { field: 'flag', title: 'iSwitch', width: 100, editRender: { name: 'iSwitch', type: 'visible' } },
        { field: 'rate', title: 'Rate', width: 200, editRender: { name: 'Rate', type: 'visible' } }
      ]
    }
  },
  created () {
    var list = [];
    for (var index = 0; index < 10; index++) {
      list.push({
        id: index + 10000,
        name: "test" + index,
        role: "前端",
        sex: "0",
        sex1:'0',
        sex2:'1',
        age: 10,
        date: "2019-05-01",
        date1: '00:09:30',
        region: ['1', '12'],
        flag:true,
        rate: 3
      });
    }
    this.tableData = list;
  },
  methods: {
    roleFilterMethod  (value, option) {
      return option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1
    }
  }
};
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/iview"></script>
<script src="//unpkg.com/vxe-table"></script>
<script src="//unpkg.com/vxe-table-plugin-iview"></script>

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

@import url("//unpkg.com/iview/dist/styles/iview.css");
@import url("//unpkg.com/vxe-table/lib/index.css");
@import url("//unpkg.com/vxe-table-plugin-iview/dist/style.css");