SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
    data() {
        return {
            gridOptions: {
                columns: [
                    {field: "name", title: "Name", treeNode: true, editRender: {}, slots: {edit: "name_input"}},
                    {field: "size", title: "Size", editRender: {}, slots: {edit: "size_input"}},
                    {field: "type", title: "Type", editRender: {}, slots: {edit: "type_input"}},
                    {field: "date", title: "Date", editRender: {}, slots: {edit: "date_picker"}},
                    {title: "操作", slots: {default: "operate"}}
                ],
                data: [
                    { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
                    { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
                    { id: 30000, parentId: null, name: 'Test4', type: 'png', size: 50, date: '2020-07-01' },
                ],
                treeConfig: {transform: true},
                editConfig: {trigger: 'click', mode: 'row', showStatus: true},
                keepSource: true,
            },
        }
    },
    methods: {
        async addRow(parentRow) {
            let { row: newRow } = await this.$refs.dataGrid.insertAt({ id: null, parentId: parentRow.id }, -1);
        },
        getTableData() {
            const { fullData, visibleData, tableData } = this.$refs.dataGrid.getTableData();

            console.log("fullData: ", fullData);
            console.log("tableData: ", tableData);
        }
    },
    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树形可编辑表格添加行BUG</h2>
			<vxe-button status="primary" content="添加行" @click="addRow({})"></vxe-button>
			<vxe-button status="success" content="获取数据" @click="getTableData"></vxe-button>
			<br>
            <br>
			<vxe-grid ref="dataGrid" v-bind="gridOptions">
                <template #name_input="{ row }">
                    <vxe-input v-model="row.name"></vxe-input>
                </template>
                <template #type_input="{ row }">
                    <vxe-input v-model="row.type"></vxe-input>
                </template>
                <template #size_input="{ row }">
                    <vxe-input v-model="row.size"></vxe-input>
                </template>
                <template #date_picker="{ row }">
                    <vxe-input v-model="row.date" type="date"></vxe-input>
                </template>
                <template #operate="{row}">
                    <vxe-button type="text" status="primary" @click="addRow(row)">添加子行</vxe-button>
                </template>
            </vxe-grid>
		</div>
	</template>
</div>
@import url("https://unpkg.com/vxe-table/lib/style.css");