如何存儲/訪問表（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>

每次單擊行數據時，將行數據存儲在變量中，然后顯示在對話框中。