element-ui 中 el-table 根据scope.row行数据变化动态显示行内控件
加入本行的数据为scope.row,其数据格式为
{
"propertyId": 4,
"propertyName": "标题",
"propertyType": 0
}
如果这里v-show=“scope.row.edit”,因为scope.row本来没有edit这个字段,当在vue的methods中改变edit值时,不能立刻反应在view中。
所以只能绑定scope.row已存在的字段,但是又出现一个问题,改变绑定的字段时数据的变化会反应在表格数据上。
解决办法:绑定scope.row.propertyId,不改变其值,改变其类型,根据其类型设置按钮是否显示
<el-table-column label="操作"> <template scope="scope"> <el-button size="small" type="primary" icon="edit" @click="handleEdit(scope.$index, scope.row)" v-show="typeof(scope.row.propertyId)=='number'"></el-button> <el-button size="small" type="danger" icon="delete2" @click="handleDelete(scope.$index, props.row.properties)" v-show="typeof(scope.row.propertyId)=='number'"></el-button> <el-button size="small" type="warning" icon="check" @click="handleEditOk(scope.$index, scope.row)" v-show="typeof(scope.row.propertyId)!=='number'"></el-button> </template> </el-table-column>
methods中
handleEdit(index, rowData) {
rowData.propertyId = rowData.propertyId.toString();
}
后来摸索,找到了最终解决方案:动态给所有数组记录 添加edit属性,
JSON.parse(JSON.stringify(this.archives.paperRecord ? this.archives.paperRecord : []))
<el-table :data="recordTable"> </el-table
let data = JSON.parse(JSON.stringify(this.archives.paperRecord ? this.archives.paperRecord : []))
data.forEach(element => {
element['edit'] = false
});
this.recordTable = data
青春承载希望,奋斗成就未来