vuejs+element UI 點選編輯表格某一行時獲取內容填入表單
阿新 • • 發佈:2018-11-10
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
}
詳細教程:
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>
這裡表格繫結的資料data是自己獲取到的,可以定義一個名為users的陣列,然後從後端獲取資料直接賦值就行,這裡就不在贅述。或者先用mockjs隨機生成資料測試更方便。
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,那麼下面定義表單資料editForm;
//編輯介面資料
editForm: {
id: 0,
name: '',
price: 0,
desc: '',
reserve:'',
},
3.可以看到,上面第一個表格的編輯按鈕上面綁定了click函式,名為handleEdit,當點選編輯按鈕時呼叫函式,我們想在編輯頁面中顯示錶格某一行的詳細資訊,那麼就要在此函式中加入表單資料繫結的函式,程式碼如下:
//顯示編輯介面 handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); }