SOURCE

var Main = {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableData: [],
      sexList: [{
        label: '',
        value: ''
      },
      {
        label: '女',
        value: '0'
      },
      {
        label: '男',
        value: '1'
      }],
      regionList: [{
        label: "北京",
        value: 1,
        children: [{
          label: "北京市",
          value: 2
        }]
      },
      {
        label: "上海",
        value: 21,
        children: [{
          label: "上海市",
          value: 22
        }]
      }],
      restaurants: [{
        value: '前端',
        name: '前端'
      },
      {
        value: '后端',
        name: '后端'
      }],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      headerMenus: [[{
        code: 'exportAll',
        name: '导出所有.csv'
      }]],
      bodyMenus: [[{
        code: 'copy',
        name: 'app.body.label.copy',
        prefixIcon: 'fa fa-copy'
      }], [{
        code: 'remove',
        name: '删除'
      },
      {
        code: 'filter',
        name: 'app.body.label.filter',
        children: [{
          code: 'clearFilter',
          name: '清除筛选'
        },
        {
          code: 'filterSelect',
          name: '按所选单元格的值筛选'
        }]
      },
      {
        code: 'sort',
        name: 'app.body.label.sort',
        children: [{
          code: 'clearSort',
          name: '清除排序'
        },
        {
          code: 'sortAsc',
          name: '升序'
        },
        {
          code: 'sortDesc',
          name: '倒序'
        }]
      },
      {
        code: 'print',
        name: '打印',
        disabled: true
      }]],
      footerMenus: [[{
        code: 'clearAll',
        name: '清空数据'
      }]],
      formData: {
        name: null,
        sex: null
      }
    }
  },
  created() {
    var list = [];
    for (var index = 0; index < 10; index++) {
      list.push({
        id: index + 10000,
        name: "test" + index,
        role: "developer",
        sex: "1",
        sex1: ['0'],
        age: 10,
        date: "2019-05-01",
        time: 1556677810888 + index * 500,
        region: "ShenZhen",
        address: "address abc" + index,
        flag: true,
        rate: 3
      });
    }
    this.tableData = list;
  },
  methods: {
    searchEvent() {
      this.dialogVisible = true
    }
  }
};
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>
      <el-button type="primary" @click="searchEvent">
        打开弹框
      </el-button>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
        <vxe-table border resizable show-overflow highlight-hover-row ref="xTable"
        class="vxe-table-element" height="460" :loading="loading" :data="tableData"
        :edit-rules="validRules" :edit-config="{trigger: 'click', mode: 'row'}"
        :context-menu="{header: {options: headerMenus}, body: {options: bodyMenus}, footer: {options: footerMenus}}">
          <vxe-table-column type="checkbox" width="60" fixed="left">
          </vxe-table-column>
          <vxe-table-column type="index" width="60" fixed="left">
          </vxe-table-column>
          <vxe-table-column field="name" title="ElInput" min-width="140" fixed="left"
          :edit-render="{name: 'ElInput'}">
          </vxe-table-column>
          <vxe-table-column field="role" title="ElAutocomplete" width="160" :edit-render="{name: 'ElAutocomplete', props: {fetchSuggestions: roleFetchSuggestions}}">
          </vxe-table-column>
          <vxe-table-column field="age" title="ElInputNumber" width="160" :edit-render="{name: 'ElInputNumber', props: {max: 35, min: 18}}">
          </vxe-table-column>
          <vxe-table-column field="sex" title="ElSelect" width="140" :edit-render="{name: 'ElSelect', options: sexList}">
          </vxe-table-column>
          <vxe-table-column field="region" title="ElCascader" width="200" :edit-render="{name: 'ElCascader', props: {options: regionList}}">
          </vxe-table-column>
          <vxe-table-column field="date" title="ElDatePicker" width="200" :edit-render="{name: 'ElDatePicker', props: {type: 'date', format: 'yyyy/MM/dd'}}">
          </vxe-table-column>
          <vxe-table-column field="date1" title="DateTimePicker" width="220" :edit-render="{name: 'ElDatePicker', props: {type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'}}">
          </vxe-table-column>
          <vxe-table-column field="date5" title="ElTimeSelect" width="200" :edit-render="{name: 'ElTimeSelect', props: {pickerOptions: {start: '08:30', step: '00:15', end: '18:30'}}}">
          </vxe-table-column>
          <vxe-table-column field="flag" title="ElSwitch" width="100" :edit-render="{name: 'ElSwitch', type: 'visible'}">
          </vxe-table-column>
          <vxe-table-column field="slider" title="ElSlider" width="200" :edit-render="{name: 'ElSlider', type: 'visible'}">
          </vxe-table-column>
          <vxe-table-column field="rate" title="ElRate" width="200" fixed="right"
          :edit-render="{name: 'ElRate', type: 'visible'}">
          </vxe-table-column>
        </vxe-table>
      </el-dialog>
    </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");