How to use Vue to build an editable and real-time saved data table?

Vue is a popular JavaScript framework that can be used to build a variety of different web applications. Among them, the data table is a component that is often used. However, many web applications need to allow users to edit data tables and save these changes in real time. So, how to use Vue to implement this function? In this article, we will discuss how to use Vue to build editable and real-time saved data tables, hoping to help you better use Vue in web application development.

1. The basic structure of the Vue component

Before using Vue to build a data table, we need to first understand the basic structure of the Vue component. Vue components are composed of three parts: template (template), logic code (script) and style (style). Among these three parts, the template determines the display content of the component, the logic code is responsible for processing the data and logic of the component, and the style controls the appearance of the component. The following is a code example of a simple Vue component:

<template>
  <div class="my-component">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

<style>
.my-component {
  font-size: 20px;
}
</style>

In this component, the template part only contains a div element and a placeholder. The logic code of this component defines a data variable named message and assigns it a default value of 'Hello, world!'. Finally, the style defines a font size of 20 pixels for the .my-component class.

2. Build an editable data table

Next, we will demonstrate how to use Vue to build a simple editable data table. In this example, we assume that the data in the table is provided by a JavaScript array, which can then be rendered into the table using Vue's v-for directive.

1. Prepare data

In the template and logic code, we need to use a data variable named rows to store the data in the table. This variable should be an array, with each element representing a row of data. Here is an example of a simple rows array:

var rows = [
  { id: 1, name: 'Apple', price: 10 },
  { id: 2, name: 'Banana', price: 5 },
  { id: 3, name: 'Orange', price: 8 }
]

2. Rendering the table

Next, we can use Vue’s v-for instruction to render the data into the table. In this example, we can create a table element and use two nested v-for loops, one looping through each row and another looping through each column. Specifically, an input element is defined in the column header, and its value is the title of the current column. An input element is also defined in each cell so that users can edit data in the table.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">
            <input v-model="column.title" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows">
          <td v-for="column in columns">
            <input v-model="row[column.field]" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'Apple', price: 10 },
        { id: 2, name: 'Banana', price: 5 },
        { id: 3, name: 'Orange', price: 8 }
      ],
      columns: [
        { field: 'id', title: 'ID' },
        { field: 'name', title: 'Name' },
        { field: 'price', title: 'Price' }
      ]
    }
  }
}
</script>

3. Save changes

Finally, when the user edits the data in the table, we need to save these changes to the rows array. We can use Vue's watch option to listen for changes in each row's data and update their corresponding positions in the rows array. Specifically, we can define a data variable named editedRow to store the row currently being edited by the user. Then, add @focus and @blur events to the cell to update the value of the editedRow variable when the user starts editing and completes editing. Finally, when the editedRow variable changes, we can save it back into the rows array.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">
            <input v-model="column.title" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :class="{ 'editing': row === editedRow }">
          <td v-for="column in columns">
            <input v-model="row[column.field]"
                  @focus="editedRow = row"
                  @blur="editedRow = null" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'Apple', price: 10 },
        { id: 2, name: 'Banana', price: 5 },
        { id: 3, name: 'Orange', price: 8 }
      ],
      columns: [
        { field: 'id', title: 'ID' },
        { field: 'name', title: 'Name' },
        { field: 'price', title: 'Price' }
      ],
      editedRow: null
    }
  },
  watch: {
    editedRow: function(newValue, oldValue) {
      if (oldValue && oldValue !== newValue) {
        // Save changes
        console.log('Changes saved for row:', oldValue)
      }
    }
  }
}
</script>

In this example, when the user starts editing a row, its style changes to the .editing class. This class can be used to specify the appearance of the cell being edited. When the user finishes editing, we detect in the watch option that the editedRow variable changes from non-null to empty, and then save the changes to the rows array.

3. Conclusion

This article demonstrates how to use Vue to build a data table that can be edited and saved in real time. In this example, we use Vue's v-for directive to render data into the table, and use the watch option to save changes to each row of data. Vue's templates, logic code, and style parts can help us organize our code better and make our applications easier to maintain and expand. Through this example, I hope it can help you better use Vue in web application development.

The above is the detailed content of How to use Vue to build an editable and real-time saved data table?. For more information, please follow other related articles on the PHP Chinese website!