
Vue el-table嵌套select:保存后优雅禁用行元素
在Vue项目中,使用el-table嵌套select组件时,常常遇到一个难题:保存数据并刷新表格后,所有选择状态为“是”的行都意外被禁用了,同时提交按钮也失效。
本文提供一种高效的解决方案:在处理后端返回数据时,为每行数据添加一个rowDisable属性,初始值为false。当后端数据中row.is_finished等于2时,将rowDisable设置为true。
在渲染el-table时,根据rowDisable属性控制select组件和保存按钮的状态。这样,即使select选项发生改变,也不会影响rowDisable的值,从而避免了因select选择而导致的行禁用问题。 按钮和select组件的启用/禁用状态完全依赖于保存后的数据。
立即学习“前端免费学习笔记(深入)”;










