If you are a student who has some experience, you can directly read the function below and you should understand what's going on. Beginners can read the detailed tutorial below.
function:
handleEdit: function (index, row) {
= true;
= ({}, row);
}
Detailed tutorial:
1. First, make a table to display information; the code is as follows:
<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="Product Name" width="120" sortable> </el-table-column> <el-table-column prop="price" label="price" width="100" sortable> </el-table-column> <el-table-column prop="reserve" label="Commodity Inventory" min-width="120" sortable> </el-table-column> <el-table-column prop="desc" label="Product Description" min-width="180" sortable> </el-table-column> <el-table-column label="operate" width="150"> <template scope="scope"> <el-button size="small" @click="handleEdit(scope.$index, )">edit </el-button> </template> </el-table-column> </el-table>
The data bound to the table is obtained by yourself. You can define an array called users, and then obtain the data from the backend and directly assign the value. I will not go into details here. Or it is more convenient to randomly generate data using mockjs first.
2. Write a pop-up editing page.
<!--Editing interface--> <el-dialog title="edit" v-model="editFormVisible" :close-on-click-modal="false"> <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> <el-form-item label="Product Name" prop="name"> <el-input v-model="" auto-complete="off"></el-input> </el-form-item> <el-form-item label="Commodity Price"> <el-input-number v-model=""></el-input-number> </el-form-item> <el-form-item label="Commodity Inventory"> <el-input-number v-model=""></el-input-number> </el-form-item> <el-form-item label="Product Description"> <el-input type="textarea" v-model=""></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @="editFormVisible = false">Cancel</el-button> <el-button type="primary" @="editSubmit" :loading="editLoading">submit </el-button> </div> </el-dialog>
The form that pops up the page is called editForm, then the form data editForm is defined below;
//Edit interface data editForm: {
id: 0,
name: '',
price: 0,
desc: '',
reserve:'',
},
3. You can see that the edit button of the first table above is bound to the click function, called handleEdit. When the edit button is clicked, the function is called. We want to display the detailed information of a certain row of the table in the edit page, so we need to add the form data binding function to this function. The code is as follows:
//Show the editing interface handleEdit: function (index, row) {
= true;
= ({}, row);
}
There are only so many things I can think of for the time being. If there is any problem with the writing, please correct me! ! ! Or if you have any questions, you can leave a message and we will make progress together! ! I hope it will be helpful to everyone's learning and I hope everyone will support me more.