SOURCE

var Main = {
    data() {
        return {
            table: {
                data: [
                    { name: "张三", age: 18, sex: "男" },
                    { name: "李四", age: 22, sex: "男" },
                    { name: "王五", age: 27, sex: "女" },
                    { name: "赵六", age: 25, sex: "男" },
                ],
                edit: false
            },
            editBtn: {
                status: "primary",
                content: "开启编辑",
            }
        }
    },
    methods: {
        toogleTableEditStatus() {
            this.table.edit = !this.table.edit;

            if(this.table.edit) {
                this.editBtn.status = "info";
                this.editBtn.content = "关闭编辑";
            } else {
                this.editBtn.status = "primary";
                this.editBtn.content = "开启编辑";
            }
        }
    },
    mounted() {
        
    }
};

var app = new Vue(Main).$mount('#app')

<script src="https://unpkg.com/vue@2.6.0">

</script>
<script src="https://unpkg.com/xe-utils">

</script>
<script src="https://unpkg.com/vxe-table@3">

</script>

<div id="app">
	<template>
		<div>
			<h2>VXETable全表格开启编辑示例</h2>
			<vxe-button :status="editBtn.status" :content="editBtn.content" @click="toogleTableEditStatus"></vxe-button>
			<br>
            <br>
			<vxe-table :data="table.data" keep-source
            :edit-config="{showStatus: true}">
				<vxe-column field="name" title="姓名" :edit-render="{}">
					<template #default="{ row }">
                        <template v-if="table.edit">
                            <vxe-input v-model="row.name" placeholder="请输入"></vxe-input>
                        </template>
                        <template v-else>
						    {{ row.name }}
                        </template>
					</template>
				</vxe-column>
				<vxe-column field="age" title="年龄" :edit-render="{}">
					<template #default="{ row }">
                        <template v-if="table.edit">
                            <vxe-input v-model="row.age" placeholder="请输入"></vxe-input>
                        </template>
                        <template v-else>
						    {{ row.age }}
                        </template>
					</template>
                </vxe-column>
				<vxe-column field="sex" title="性别" :edit-render="{}">
					<template #default="{ row }">
                        <template v-if="table.edit">
                            <vxe-input v-model="row.sex" placeholder="请输入"></vxe-input>
                        </template>
                        <template v-else>
						    {{ row.sex }}
                        </template>
					</template>
                </vxe-column>
			</vxe-table>
		</div>
	</template>
</div>

@import url("https://unpkg.com/vxe-table/lib/style.css");