et-table嵌套et-select选择数据时,下拉框选项改变表格数据无变化的问题

最新推荐文章于 2024-10-26 17:08:24 发布

挽城.

最新推荐文章于 2024-10-26 17:08:24 发布

阅读量1.1k

点赞数 1

文章标签： vue.js elementui css3

本文链接：https://blog.csdn.net/weixin_54610021/article/details/123162836

版权

在Vue.js项目中，使用ElementUI的el-table组件时，若表格单元格内嵌套了el-select，可能会遇到选中值改变但表格数据显示不变的bug。通过在select的change事件中动态添加和删除数据，强制刷新表格视图，成功解决了这个问题。

摘要由CSDN通过智能技术生成

开发过程中遇到这样一个问题，在一个表格里的每一项都是一个下拉框，在有些状态下下拉框选中之后表格里的值并没有变化，只有在新增一行之后下拉框选择的值才会发生改变。

在这里插入图片描述

el-table里嵌套el-select功能的实现

<el-table-column prop="authStatus" label="授权状态" align="center">
     <template slot-scope="scope">
   	    <el-select v-model="scope.row.authStatus">
   		      <el-option
   		        v-for="item in dicts.engineer_auth_status"
   		        :key="item.value"
   		        :label="item.labelDefault"
   		        :value="item.value"
   		      >
   		      </el-option>
   	    </el-select>
     </template>
</el-table-column>