elementui el-table中每行嵌套的el-dialog的scope取值bug

最新推荐文章于 2025-07-16 16:41:05 发布

原创最新推荐文章于 2025-07-16 16:41:05 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

文章描述了一个在Vue.js应用中使用el-table和el-dialog时遇到的问题，即在el-dialog内绑定的scope.$index始终取到数组的最大索引值，导致对话框显示错误的数据。作者通过在data()中添加dialogIndex变量并更新子表格数据绑定来解决这个问题。现在，点击按钮时，正确行的索引被传递给dialogIndex，从而在对话框中显示正确的子表格内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题概述：

在el-table中的每行放了一个按钮触发el-dialog对话框，对话框里显示的是一个属性和值的子表格，子表格绑定数组listDataCopy[scope.$index]，即每行的对话框显示的均为二维数组listDataCopy对应行索引的元素。

但是测试发现，代码中的el-dialog外的所有的scope.$index均传值正常，el-dialog内的scope.$index均传值为listDataCopy数组最大索引值。即，每个对话框的内容显示的均为listDataCopy最后一个元素的内容。

问题代码：

          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index)"
              >
                <i class="el-icon-info"></i> 详细信息 {{ scope.$index }}
              </el-button>
              <el-dialog
                :title="`详细信息${scope.$index}`"
                :visible.sync="dialogVisible"
                width="25%"
                :append-to-body="true"
                :lock-scroll="false"
              >
                {{ scope.$index }}
                <el-scrollbar>
                  <div class="list-item">
                    <el-table :data="listDataCopy[scope.$index]">
                      <el-table-column
                        label="属性"
                        prop="ParaDesc">
                      </el-table-column>
                      <el-table-column
                        label="数值"
                        prop="ParaValue">
                      </el-table-column>
                    </el-table>
                  </div>
                </el-scrollbar>
                <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false"
                >知道了</el-button>
              </span>
              </el-dialog>
            </template>
          </el-table-column>

问题分析：这边为了测试，在el-dialog内外绑定了多个scope.$index看能不能取到正确的每行的索引值，发现el-dialog标签内的所有index均取值错误（即每行均显示listDataCopy数组末位元素），标签外的均能正常取到。

解决方案：这边暂时没有找到根本上解决该问题的方法。

目前在data()里定义了变量dialogIndex用于定位点击的哪一行的对话框触发按钮，在每行的按钮绑定的点击事件handleEdit(scope.$index)函数里，将scope.$index赋值给this.dialogIndex。随后在对话框中嵌套的子表格里，将刚刚表格绑定的listDataCopy[scope.$index]改成了listDataCopy[dialogIndex]，测试后问题解决。

如果有大神对该bug还有其他的一些思路，恳请在评论区指导。