点击编辑或者保存按钮后,再点击列表符号“>”,表格编辑状态才会变,不知道哪里出问题了,不知道怎么改,而且删掉数据列表里的:“children”后,点击编辑和保存按钮什么也没发生。
希望可以让行内编辑正常进行,如果整体有问题,希望可以给我可以替代的“可编辑树形表格”的代码,我自己研究也可。
代码如下:
<template>
<div>
<el-table :data="tabledata" style="width: 100%;margin-bottom: 20px;" row-key="id" border lazy
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="number" label="序号" width="90">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
<template slot-scope="scope">
<el-input placeholder="请输入姓名" v-show="scope.row.show" v-model="scope.row.name"></el-input>
<span v-show="!scope.row.show">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="province" label="省份" width="120">
<template slot-scope="scope">
<el-input placeholder="请输入省份" v-show="scope.row.show" v-model="scope.row.province"></el-input>
<span v-show="!scope.row.show">{{scope.row.province}}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="scope.row.show =true">编辑</el-button>
<el-button @click="scope.row.show =false">保存</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tabledata: [{
id: 1,
number: 1,
date: '2016-05-02',
name: '王小虎',
province: '上海',
children: [{
id: 11,
number: "1-1",
date: '2016-05-02',
name: '王小虎',
province: '上海'
}, {
id: 12,
number: "1-2",
date: '2016-05-02',
name: '王小虎',
province: '上海'
}]
}],
}
}
}
</script>