vue el-table 内嵌套 select 遇到问题?
如下代码我在el-table里面嵌套了一个select:
<template v-slot:is_finished="{ row }">
<el-select v-model="row.is_finished" placeholder="请选择" @change="handleGetFinished" :disabled="row.is_finished == 2">
<el-option
v-for="item in finishOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
我们的要求是选择了“是”后,点击保存,刷新表格数据后选择了“是”的,要禁用select,和提交按钮。
我是怎么做的呢,首次进入页面根据后端接口返回的数据控制禁用:disabled="row.is_finished == 2";
提交数据的时候需要获取选项的这个值,于是select使用change事件,但是,我选择后就直接改掉了行row.is_finished的值,直接禁用了,而且提交按钮也给禁用了,如下图:
怎么样才能不影响select选择和按钮提交?
回复
1个回答
test
2024-06-24
想实现仅根据保存后的数据来控制select和按钮的状态,可以加工一下后端返回的数据
:每行数据新增一个属性rowDisable,默认为false;如果row.is_finished 等于 2 ,设置rowDisable为true。在渲染table中的 select 和 保存按钮 时,根据行rowDisable来决定是否禁用。这样,即使select值发生变化,也不会导致rowDisable值发生变化。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容