本文探讨了在Vue中如何使用v-show指令动态控制表格内按钮的显示状态，尤其在处理行内编辑操作时遇到的问题。通过绑定行数据的特定属性并巧妙地更改其类型来实现按钮显示的切换，同时避免直接修改数据导致表格数据的意外变更。最后，提出了一种在TypeScript中利用额外变量来跟踪编辑状态的方法，既保持了语言类型的安全性，又实现了预期的视图更新效果。
对每个按钮是否显示，使用v-show绑定变量，因为每一行的v-show绑定的变量必须是唯一的(不然的话操作此行，其他行的状态也会跟着变化)，所以不可能提前在.ts中对变量进行初始化，只能使用本行的字段进行v-show绑定。
加入本行的数据为scope.row，其数据格式为
{"propertyId": 4,"propertyName": "标题","propertyType": 0},
如果这里v-show=“scope.row.edit”，因为scope.row本来没有edit这个字段，当在.ts中改变edit值时，不能立刻反应在view中。所以只能绑定scope.row已存在的字段，但是又出现一个问题，改变绑定的字段时数据的变化会反应在表格数据上。
最后解决办法：绑定scope.row.propertyId，不改变其值，改变其类型，根据其类型设置按钮是否显示。
效果：
.vue中：
.ts中：
handleEdit(index, rowData) {rowData.propertyId=rowData.propertyId.toString();
}
handleDelete(index, tableData) {
tableData.splice(index,1);
}
handleEditOk(index, rowData) {
rowData.propertyId=Number(rowData.propertyId);
}
但是，在ts中并不推荐这样使用，因为这样就失去了ts语言类型检测的意义，最终解决办法如下：
在.ts文件中定义一个变量minimum=-9999，并将变量editingPropId初始化为minimum，当点击“编辑”按钮时，this.editingPropId = rowData.propertyId；当点击“编辑完成”按钮时，将this.editingPropId = minimum
.vue中这样控制各个按钮的显示与否：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
