vuejs+element UI點擊編輯表格某一行時獲取內(nèi)容填入表單的示例
更新時間：2018年10月31日 11:34:06 作者：caixiaodaohaha
這篇文章主要介紹了vuejs+element UI點擊編輯表格某一行時獲取內(nèi)容填入表單的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
如果是已經(jīng)有點經(jīng)驗的同學(xué)，可以直接看下面這個函數(shù)，應(yīng)該就能明白怎么回事，新手可以看下面的詳細(xì)教程。
函數(shù)：
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
}
詳細(xì)教程：
1.首先，做一個表格，用于顯示信息；代碼如下：
<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="index" width="60"> </el-table-column> <el-table-column prop="name" label="商品名稱" width="120" sortable> </el-table-column> <el-table-column prop="price" label="價格" width="100" sortable> </el-table-column> <el-table-column prop="reserve" label="商品庫存" min-width="120" sortable> </el-table-column> <el-table-column prop="desc" label="商品描述" min-width="180" sortable> </el-table-column> <el-table-column label="操作" width="150"> <template scope="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯 </el-button> </template> </el-table-column> </el-table>
這里表格綁定的數(shù)據(jù)data是自己獲取到的，可以定義一個名為users的數(shù)組，然后從后端獲取數(shù)據(jù)直接賦值就行，這里就不在贅述?；蛘呦扔胢ockjs隨機生成數(shù)據(jù)測試更方便。
2.寫一個彈出的編輯頁面。
<!--編輯界面--> <el-dialog title="編輯" v-model="editFormVisible" :close-on-click-modal="false"> <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> <el-form-item label="商品名稱" prop="name"> <el-input v-model="editForm.name" auto-complete="off"></el-input> </el-form-item> <el-form-item label="商品價格"> <el-input-number v-model="editForm.price"></el-input-number> </el-form-item> <el-form-item label="商品庫存"> <el-input-number v-model="editForm.reserve"></el-input-number> </el-form-item> <el-form-item label="商品描述"> <el-input type="textarea" v-model="editForm.desc"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click.native="editFormVisible = false">取消</el-button> <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交 </el-button> </div> </el-dialog>
彈出頁面的表單名為editForm，那么下面定義表單數(shù)據(jù)editForm；
//編輯界面數(shù)據(jù)
editForm: {
id: 0,
name: '',
price: 0,
desc: '',
reserve:'',
},
3.可以看到，上面第一個表格的編輯按鈕上面綁定了click函數(shù)，名為handleEdit，當(dāng)點擊編輯按鈕時調(diào)用函數(shù)，我們想在編輯頁面中顯示表格某一行的詳細(xì)信息，那么就要在此函數(shù)中加入表單數(shù)據(jù)綁定的函數(shù)，代碼如下：
//顯示編輯界面
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
}
暫時能想到的就這么多，如果寫的有什么問題，歡迎指正?。?！或者有什么問題也可以留言我們共同進步哦??！希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中?provide?和?inject?用法小結(jié)
父子組件傳遞數(shù)據(jù)時,使用的是props和emit,父傳子時,使用的是?props,如果是父組件傳孫組件時,就需要先傳給子組件,子組件再傳給孫組件,如果多個子組件或多個孫組件使用時,就需要傳很多次,會很麻煩,這篇文章主要介紹了vue3中?provide?和?inject?用法,需要的朋友可以參考下2023-11-11
解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
今天小編就為大家分享一篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細(xì)步驟(超詳細(xì))
Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
如何封裝自己的Vue組件,如何把自己的Vue代碼封裝成公共組件，今天為大家簡單介紹一下如何封裝自己的Vue組件2018-10-10
elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了深入了解Vue3模板編譯原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了Vue路由切換的兩種方式,主要包括標(biāo)簽切換和js切換，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue 如何使用餓了么UI仿寫teambition的篩選功能，幫助大家更好的理解和學(xué)習(xí)使用vue框架2021-03-03
這篇文章主要介紹了Vue中使用keepAlive不緩存問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08