如何存储/访问表（el-table）中的特定行数据并在单击该行中的链接时在对话框中显示（不是警报）？

Question

我在 Vue.js 中使用 el-table (elements - ui) 创建了一个表。我在该表中有多个列（id、用户名、total_number）。 total_number 列由按钮组成。 当我单击该按钮时，它应该打开一个对话框，并调用一个名为 fetchData 的 function（在 javascript 中），它发送行 object。我编写的代码在访问该特定行数据时出现了一些问题。

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

                   <template slot-scope="scope">
                      <el-button type="text" @click="dialogVisible = true">{{scope.row.count}}
                      </el-button>

                      <el-dialog
                        :visible.sync="dialogVisible"
                        :before-close="handleClose">
                           {{fetchData(scope.row)}}
                      </el-dialog>
                   </template>
                </el-table-column>

javascript 代码

fetchData(row){
   console.log(row.id +" "+row.username);
}

如果我单击第一行的按钮，并调用 fetchData，我希望它传递第一行的 object 为 scope.row 传递给 function fetchData。 对于单击的任何行，依此类推。 相反，它最终以某种方式在表的最后一行打印值（id 和用户名）。

表中共有 7 行 3 列。 第三列中有按钮。 当我点击第 3 列第 1 行的按钮时，我想调用传递第 1 行的 function fetchData。 那就是我想传递第一行的 object 行。 上面代码中实际发生的是它发送最后（第 7）行的 object（scope.row）。 我想调用 fetchData function 并在对话框打开时传递当前行 object。 我应该在上面的代码中进行哪些更改才能在单击特定行中的按钮时访问当前行？

如果有人在这里指出我的错误，我将不胜感激。

谢谢你。

Answer 1

 var Main = { data() { return { dialogVisible: false, rowData: null, tableData: [{ id: 1, username: 'Tom', count: 10 }, { id: 2, username: 'Jack', count: 20 }, { id: 3, username: 'Leo', count: 30 }] } }, methods: { showDialogHandle(row) { this.rowData = Object.assign({}, row) this.dialogVisible = true }, handleCloseDialog() { this.rowData = null this.dialogVisible = false } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')

 @import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");

 <script src="//unpkg.com/vue/dist/vue.min.js"></script> <script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script> <div id="app"> <el-table:data="tableData" style="width: 100%"> <el-table-column prop="id" label="ID" min-width="180"></el-table-column> <el-table-column prop="username" label="Name" min-width="180"></el-table-column> <el-table-column prop="count" label="Total" min-width="180"> <template slot-scope="scope"> <el-button type="text" @click="showDialogHandle(scope.row)">{{scope.row.count}} </el-button> </template> </el-table-column> </el-table> <el-dialog:visible.sync="dialogVisible":before-close="handleCloseDialog"> {{rowData}} </el-dialog> </div>

每次单击行数据时，将行数据存储在变量中，然后显示在对话框中。