vue el-table 内嵌套 select 遇到问题?

作者站长头像
站长
· 阅读数 6

如下代码我在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的值,直接禁用了,而且提交按钮也给禁用了,如下图:vue el-table 内嵌套 select 遇到问题?

怎么样才能不影响select选择和按钮提交?

回复
1个回答
avatar
test
2024-06-24

想实现仅根据保存后的数据来控制select和按钮的状态,可以加工一下后端返回的数据:每行数据新增一个属性rowDisable,默认为false;如果row.is_finished 等于 2 ,设置rowDisable为true。在渲染table中的 select 和 保存按钮 时,根据行rowDisable来决定是否禁用。这样,即使select值发生变化,也不会导致rowDisable值发生变化。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容