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

This article mainly introduces the "elementUI table table change data does not update the problem how to solve" the relevant knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, hope that this "elementUI table table change data does not update how to solve the problem" article can help you solve the problem.

Expected effect: click the icon next to the input box, and the input box becomes available for input. Here, the editable field that controls the input is not the original attribute of data, nor is it the field that exists when the data is assigned.

The cause of the problem: the editable is not declared when the Vue instance is created and when the data is assigned, so it is not converted into a responsive property by Vue, and the view update will not be triggered naturally.

Solution:

1. Add the editable attribute to the array before assigning a value to data

The general idea is to cache the list information in a temporary array (not an object defined in data), loop through the list information, add an attribute editable value of false to each piece of data, and then assign the processed list information to data.

2. Use: key or v-if

Change the key value bound to table to trigger the re-rendering of table, so that the modified data can be updated in the table.

Export default {data () {return {num:0, data: []}}, methods: {changeEdit (row) {/ / every click on the icon key automatically adds a row.editable = true Num++;}

There is a problem with this method: add a default height to table, when there is more data, a scroll bar will appear; when the scroll bar is pulled below, click the icon to make the corresponding input box editable, and trigger table rendering, the scroll bar will go back to the top. If you want to view the manipulated input box, you need to pull the scroll bar back to the bottom; this experience is very bad. If there is such a scenario, the following method is recommended.

3. Use $set

Set allows you to dynamically add responsive attributes to data and make editable responsive, which can trigger page updates directly.

Export default {data () {return {num:0, data: []}}, methods: {changeEdit (index,row) {row.editable = true; this.$set (this.data,index,row) }}}

According to the method above, the update is triggered when vue can detect a change in the array.

ChangeEdit (index,row) {row.editable = true; this.data.splice (1Power0);} this is the end of the introduction of "how to solve the problem of changing the table table of elementUI without updating data". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.