SOURCE

var Main = {
    data() {
        return {
            tableData: [],
            gridOptions: {
                border: true,
                columns: [
                    { field: 'name', title: 'Name',editRender:{name: 'MyInput'} },
                    { field: 'sex', title: 'Sex' },
                ],
                data: []
            }
        }
    },
    mounted() {
        var list1 = []
        var list2 = []
        for (var index = 0; index < 3; index++) {
            list2.push({ name: 'test' + index, sex: 'Man', })
        }

        this.gridOptions.data = list2
    }
};

Vue.createApp(Main).use(VXETable).mount('#app')

VXETable.renderer.add('MyInput', {
    // 可编辑激活模板
    renderEdit(renderOpts, params) {
        let { row, column } = params
        return [
            <input class="my-cell" text="text" v-model={row[column.field]} />
        ]
    },
    // 可编辑显示模板
    renderCell(renderOpts, params) {
        let { row, column } = params
        return [
            <span>{row[column.field]}</span>
        ]
    },
    // 导出模板，例如导出插槽中自定义的内容
    exportMethod(params) {
        const { row, column } = params
        return '自定义内容'
    }
})

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

<div id="app">
    <div>
      <p>Grid 演示</p>
      <vxe-grid v-bind="gridOptions"></vxe-grid>
    </div>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css");