Shulou(Shulou.com)06/02 Report--

This article mainly shows you the "element-ui how to directly click on the cell in the table to edit", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "element-ui how to directly click on the cell in the table to edit" this article.

Realize the effect

After editing, the field value of the corresponding table data has changed, and the console can output all the data to view the changes.

Implementation code

1. Custom editing component

{{value}} {{this.suffix}} {{suffix}} export default {name: "EditCell", props: {/ * binding value * / value: {required: true}, / * * whether it is editable * / CanEdit: {type: Boolean Default: true}, / * format function * / formatData: {type: Function, default: value = > {return value }}, / * Post-editing event * / afterEdit: {type: Function, default: () = > {}}, / * whether the initial format is * / initFormat: {type: Boolean, default: false}, suffix: {default: ""}} Data () {return {editStatus: false, showData: ", defaultData:", timeout: null} }, methods: {/ * Click to start editing * / beginEdit () {this.editStatus = true; setTimeout (() = > {this.$refs.input.focus ();}, 1) }, / * * @ param {event} event * lose focus close editing state and save data * / loseFocus (event) {let value = this.formatData (event.target.value); this.editData (value); this.closeEditStatus (value); this.afterEdit (value) }, / * publish input event modification data * @ param value * / editData (value) {this.$emit ("input", value);}, / * turn off editing status * @ param value * / closeEditStatus (value) {this.editStatus = false }, / * initial format data * / initData () {let newValue = this.formatData (this.value); this.$emit ("input", newValue);}}, mounted () {if (this.initFormat) {this.initData () }, watch: {'value': function (newVal) {this.$emit ("input", this.formatData (newVal));}; .editCell {height: 100%; width: 100%;}. InputClass {height: 30px; width: 100%; background-color: # fff; border-radius: 4px; border: 1px solid # dcdfe6; color: # 606266; display: inline-block; font-size: inherit; line-height: 30px Outline: 0; padding: 0 15px; transition: border-color 0.2s cubic-bezier (0.645, 0.045, 0.355, 1); overflow: visible; touch-action: manipulation; margin: 0;}

Page call

Import EditCell from "@ / components/EditCell/EditCell" Components: {EditCell}, / / the custom component is called here (dataIndex is the field in the header data Equivalent to showing the teacher name corresponding to the header teacher) {{scope.row [item.dataIndex]}} / if you need to format the data, you can set: format-data= "formatFun" formatFun this method can be defined in the current page methods. Above is all the content of the article "how to click on the cell to edit in the table by element-ui". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.