1. 程式人生 > >vuejs+element UI 點選編輯表格某一行時獲取內容填入表單

vuejs+element UI 點選編輯表格某一行時獲取內容填入表單

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);
			}