1. Internal display and editing toggle the table
This method is to use two labels to display and hide. We use input and span here to display data normally with span. When clicking to edit, hide span and display input for editing. When selecting the current row, we can use the index in slot-scope to achieve it. By binding the index on the hidden properties of the control display, you can select the current row, such as showEdit[index].
Page structure code:
<el-table
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
header-align="center">
<el-table-column width="50" header-align="center">
<template slot-scope="{row,$index}">
<span>{{$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="name" prop="Name" width="300" header-align="center">
<template slot-scope="{row,$index}">
<input class="edit-cell" v-if="showEdit[$index]" v-model="">
<span v-if="!showEdit[$index]">{{}}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="operate"
width="100"
header-align="center">
<template slot-scope="{row,$index}">
<el-button type="text" size="small" @="handleUpdate($index, row)" v-if="showBtn[$index]">renew</el-button>
<el-button type="text" size="small" @="handleCancel($index, row)" v-if="showBtn[$index]">Cancel</el-button>
<el-button type="text" size="small" @="handleEdit($index, row)" v-if="!showBtn[$index]">edit</el-button>
<el-button type="text" size="small" @="handleDelete($index, row)" v-if="!showBtn[$index]">delete</el-button>
</template>
</el-table-column>
</el-table>
Initialize data:
data() {
return {
showEdit: [], //Show the edit box showBtn: [],
showBtnOrdinary: true
}
}
Implementation method:
//Click to edithandleEdit(index, row) {
[index] = true;
[index] = true;
this.$set(,row,true)
this.$set(,row,true)
},
//Cancel EdithandelCancel(index, row) {
();
[index] = false;
[index] = false;
},
//Click to updatehandleUpdate(formName) {
},
//Click to deletehandleDelete(index, row) {
},
It is best to assign values to the array during initialization
for(var i = 0; i < 100; i ++) {
[i] = false;
[i] = false;
this.$set([i], false);
this.$set([i], false);
}
In addition, you can add a property to the row itself to control the editing of each row. The above mentioned has no problem in my development environment implementation, but there are many bugs (no response, no response when clicking the first time, etc.). Later, I checked the official document of vue "Asynchronous queue update", and I may need to add a (callback). The project is relatively tight and has changed another way of implementation. Interested friends can check out the official documentation:/v2/guide/
2. Edit by popping up another table
This is implemented by an article found online, the original link:https:///article/
In addition, there is also implementation code on github. I don’t know if it is the same person. In order to respect the originality, the address is placed here:/Recklesslmz/elementUI
This method is much simpler to implement. The initialization table code is the same as above, but you can remove the input edit box and showEdit attribute. You also need to create a hidden dialog and put another form in it:
<el-dialog title="edit"
:="editFormVisible"
:close-on-click-modal="false"
class="edit-form"
:before-close="handleClose">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="name" prop="Name">
<el-input v-model="" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @="handleCancel('editForm')">Cancel</el-button>
<el-button type="primary" @="handleUpdate('editForm')">renew</el-button>
</div>
</el-dialog>
Initialize data:
editFormVisible: false, //The editing layer is not displayed by default
method:
//Click to edithandleEdit(index, row) {
= true;
= ({}, row); //This sentence is the key! ! !},
//Click to close dialoghandleClose(done) {
/*done();
();*/
= false;
},
//Click to CancelhandleCancel(formName) {
= false;
},
//Click to updatehandleUpdate(forName) {
//When updating, write the data in the pop-up form to the table to be modified var postData = {
name: ;
}
//Send a post request to the background to re-render the table data = false;
}
3. Directly control through style
When the table mouse in element-ui selects rows, the row class will automatically add a current-row, so by setting this class, the display of editable and non-editable tags is hidden. Specific reference:https:///article/
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.