尝试访问对话框中的特定行时 Table 中的范围问题（Vue.js、Element-ui）

Question

我在 Vue.js 中使用 el-table (Element-ui) 创建了一个 table。单击该行中的按钮时，我想访问 table 中的特定行，但这里的问题是单击按钮后，应打开一个对话框，然后访问该特定行。当我尝试使用 scope.row 访问对话框外部的行时，它工作得很好，但在对话框内部访问时它无法正常工作，而是循环运行直到 [=24] 结束=].

请查找以下代码：

        <el-table-column prop="count"
                   label="Total">

                   <template slot-scope="scope">
                      <!-- {{fetchData(scope.row)}} When scope.row is accessed here, it works perfectly--> 

                      <el-button type="text" @click="dialogVisible = true">{{scope.row.count}}</el-button>
                      <el-dialog
                        :visible.sync="dialogVisible"
                        :before-close="handleClose">

                   <!--I want to access the speicfic row clicked here, but it ends up looping through the table and doesnt send that specific row only. -->
                           {{fetchData(scope.row)}}
                           
                      </el-dialog>
                   </template>
                </el-table-column>

有人可以在上面的代码中提出一些解决这个问题的方法吗？我坚持了一段时间。将不胜感激。

谢谢。

Answer 1

这是一个 table... 所以 fetchData 将在您的代码所在的每一行被调用。

但是，如果您将 fetchData 附加到按钮上，它将起作用。但是你必须在混合中添加一个变量，或者使用计算的属性。无论如何，我不喜欢在模板中调用函数、在脚本中处理该逻辑或使用计算属性。所以这就是我要做的：

data() {
  return {
    chosenRow: null
  }
},
methods: {
  fetchData(row) {
    this.chosenRow = row;
  }
}

模板：

<template slot-scope="scope">
  <el-button type="text" @click="fetchData(scope.row); dialogVisible = true">
    {{ scope.row.follower_count }}
  </el-button>
  <el-dialog :visible.sync="dialogVisible">
     {{ chosenRow }}      
  </el-dialog>
</template>

或者只分配模板中的行...

@click="chosenRow = scope.row; dialogVisible = true"

尝试访问对话框中的特定行时 Table 中的范围问题（Vue.js、Element-ui）

Scoping Issue in Table when trying to access a specific row in a dilaog box (Vue.js, Element-ui)

html

scoping

vue.js

vuejs2

element-ui