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");