Article From:https://segmentfault.com/q/1010000011699176
Question:

Click Edit Mode in the implementation icon.

Answer 0:


      <el-table-column min-width="300px" label="Title ">< template scope= "scope" >< el-input v-show= "scope.row.edit" size= "Small "v-model=" scope.row.title "> < /el-input>< span v-show= "! Scope.row.edit" > scope.row.title}}< /span>< /template>< /el-table-column>< el-table-column align= "center" label= "Edit" width= "120" >< template scope= "scope" >< el-button: type= "scope.row.edit:'success':'primary'" @click='scope.row.edit=! Scope.roW.edit'size= "small" icon= "Edit" > {{scope.row.edit? "Finish": edit'}}< /el-button>< /tempLate>< /el-table-column>

Multiple editors in the row

<el-table-column width="220px" label="The author ">< template scope= "scope" >< el-input v-show= "scope.row.edit.author"Size= "small" v-model= "scope.row.author" style= "width:100px" > < /el-input>< spanV-show= "! Scope.row.edit.author" > > scope.row.author; /span>< el-button: typE= "scope.row.edit.author?'success':'primary'" @click='scope.row.edit.author=! Scope.row.edit.author'Size= "small" icon= "Edit" > {{scope.row.edit.author "completion": edit'}}< /el-button>< /templAte>< /el-table-column>< el-table-column min-width= "300px" label= "title" >< template scope= "scope" >< el-input v-show= "scope.row.edit.title" size= "smal"L "v-model=" scope.row.title "style=" width:300px "> < /el-input>";< span v-show= "! SCOpe.row.edit.title ">" scope.row.title}}< /span>< el-button: type= "scope.row.eDit.title?'success':'primary' "@click='scope.row.edit.title=! Scope.row.edit.title'size=" small "icon"= "Edit" > {{scope.row.edit.title? "Finish": edit'}}< /el-button>< /template></el-table-column>/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =CreaTed () {This.getList ()},Methods: {GetList () {This.listLoading = true/ / get dataFetchList (this.listQuery).Then (response => {Const items = respOnse.data.itemsThis.list = items.map (V => {/ / whole line//this.$set (V,'edit', false)/ / multi column title and author editableV = Object.assign ({}, V, {edit: {Title: false, author: false,Return V})This.listLoading = false})}}

Answer 1:

<el-table-column prop="number" scope="scope"></el-table-column>Add a tag to this tag.templateThe tag contains one.input,Onediv,These two labels bind to a variable.v-ifAnd v-elseDetermine to display one of them, show div by default, bind click events to div, change the V-IF variable to true, display input, hide div, and so on. Because the data of each row should be separated, so remember that each line’s presentation of hidden variables is also.Independent

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *