SOURCE

// // 创建一个弹窗渲染
// VXETable.renderer.add('EditPopupModal', {
//   autofocus: '.vxe-input--inner',
//   renderEdit (h, renderOpts, params) {
//     return [
//       <edit-popup-modal params={ params }></edit-popup-modal>
//     ]
//   }
// })
// //由于这些在线代码示例不能多个文件同时使用，
// Vue.component('EditPopupModal',{
//     template: '#EditPopupModal',
//       props: {
//     params: Object
//   },
//   data () {
//     return {
//       row: null,
//       column: null,
//       modalVisible: false,
//       loading: false,
//       tableData: [],
//       tableColumn: [
//         { type: 'checkbox', width: 80 },
//         { field: 'name', title: 'Name' },
//         { field: 'role', title: 'Role' },
//         { field: 'sex', title: 'Sex' }
//       ],
//       tablePage: {
//         total: 0,
//         currentPage: 1,
//         pageSize: 10
//       }
//     }
//   },
//   created () {
//     this.load()
//   },
//   methods: {
//     load () {
//       const { row, column } = this.params
//       this.row = row
//       this.column = column
//       this.getData().then(data => {
//         this.tableData = data
//       })
//     },
//     getData () {
//       return new Promise(resolve => {
//         setTimeout(() => {
//           const list = [
//             { name: 'Test1', role: '前端', sex: '男' },
//             { name: 'Test2', role: '后端', sex: '男' },
//             { name: 'Test3', role: '测试', sex: '男' },
//             { name: 'Test4', role: '设计师', sex: '女' },
//             { name: 'Test5', role: '前端', sex: '男' },
//             { name: 'Test6', role: '前端', sex: '男' },
//             { name: 'Test7', role: '前端', sex: '男' }
//           ]
//           resolve(list)
//         }, 100)
//       })
//     },
//     popupEvent () {
//       this.modalVisible = true
//     },
//     pageChangeEvent ({ currentPage, pageSize }) {
//       this.tablePage.currentPage = currentPage
//       this.tablePage.pageSize = pageSize
//       this.loading = true
//       this.getData().then(data => {
//         this.loading = false
//         this.tableData = data
//       })
//     },
//     confirmEvent () {
//       const { row, column } = this
//       const selectRecords = this.$refs.xGrid.getCheckboxRecords()
//       row[column.property] = `${selectRecords.length}条`
//     }
//   }
// })


var Main = {
  data() {
    return {
      columns:[
          {
              props:{
                type: 'seq',
                title: '序号'
              }
          },
          {
              props:{
                field: 'name',
                title: '名字'
              }
          },
          {
              props:{
                field: 'sex',
                title: '性别'
              }
          },
          // 渲染出<vxe-input v-model="value405" placeholder="日期和时间选择" type="datetime" clearable></vxe-input>
          {
              props:{
                field: 'date',
                title: '日期',
                editRender:{
                    name: '$input',
                    props: {
                        placeholder:'日期和时间选择',
                        type: 'datetime'
                    }
                }
              }
          },
          //渲染出 <input type="number"/>
          {
              props:{
                  field: 'score',
                  title: '分数',
                  'edit-render':{ //也可写成editRender
                      name: 'input', //渲染器名称 可选值 input, textarea, select, $input, $select, $switch
                      attrs: {
                          type: 'number'
                      }
                  }
              },
          }
      ],
      tableData: [
          {name: '张三', sex: '男', date: '2020-01-01', score: ''},
          {name: '李四', sex: '女', date: '2020-01-01', score: ''},
          {name: '王五', sex: '男', date: '2020-01-01', score: ''},
          {name: '老六', sex: '女', date: '2020-01-01', score: ''},
          {name: '老七', sex: '男', date: '2020-01-01', score: ''}
      ],
      tableEditRules:{
        'score': [
            { required: true, message: '缺少分数' },//required校验
            { type: 'number', message: '分数为数字' },//type校验
            { max:5, message:'请保持两位小数点' },//max校验
            { //自定义检验方法
                validator: (context) => {
                    const val = +context.cellValue
                    if (val <= 0 || val > 100) {
                        return Promise.reject(new Error('分数为0-100的数'))
                    }
                },
            },
        ],
      }
    }
  },
};
var app = new Vue(Main).$mount('#app')

<!-- 引入样式 -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<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/vxe-table"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
  <template>
    <div>
      <vxe-table 
        :data="tableData"
        :edit-config="{
          trigger: 'click',//编辑在点击时触发
          mode: 'row', //编辑模式触发时整行的所有input跟着进入编辑模式
        }"
        :edit-rules="tableEditRules"
        >
        <vxe-column  v-bind="col.props" v-for="col in columns"></vxe-column>
      </vxe-table> 
    </div>
  </template>
  <template id="EditPopupModal">
        <div class="edit-popup-modal">
        <vxe-input class="edit-popup-input" v-model="row[column.property]" placeholder="请选择"></vxe-input>
        <vxe-button class="edit-popup-button" icon="fa fa-list" type="text" @click="popupEvent"></vxe-button>
        <vxe-modal
        show-footer
        class-name="vxe-table--ignore-clear edit-popup-box"
        width="800"
        height="400"
        v-model="modalVisible"
        @confirm="confirmEvent">
        <template #default>
            <vxe-grid
            highlight-hover-row
            auto-resize
            ref="xGrid"
            height="auto"
            :loading="loading"
            :pager-config="tablePage"
            :data="tableData"
            :columns="tableColumn"
            @page-change="pageChangeEvent">
            </vxe-grid>
        </template>
        </vxe-modal>
    </div>
  </template>
</div>
<style>
.edit-popup-modal {
  display: flex;
  align-items: center;
}
.edit-popup-input {
  width: auto;
  flex-grow: 1;
}
.edit-popup-button {
  flex-shrink: 0;
}
</style>