How to implement editable tables in Vue

In many Web applications, tables are an essential component. Tables usually have large amounts of data, so tables require some specific features to improve user experience. One of the important features is editability. In this article, we will explore how to implement editable tables using Vue.js and provide specific code examples.

Step 1: Prepare the data

First, we need to prepare the data for the table. We can use a JSON object to store the table's data and store it in the data property of the Vue instance. In this example we will create a simple table with three columns: name, quantity and price. Here is the sample data we are going to use:

data: {
  items: [
    { name: 'Item 1', quantity: 1, price: 10 },
    { name: 'Item 2', quantity: 2, price: 20 },
    { name: 'Item 3', quantity: 3, price: 30 }
  ]
}

Step 2: Create the table component

We will use the Vue.js component to create the table. One of the benefits of using components is that they can be reused and used multiple times within a Vue application. Here is the basic structure of the table component we are going to create:

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td>{{ item.name }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

The component has a name called "TableComponent" and uses the props attribute to receive our previous data collection as its properties. The v-for directive is used to render rows in a table. This instruction loops through each object in the items array and creates the corresponding row.

Step 3: Enable Editing

Now we can display the table in the application. The next step is to make the table editable. To achieve this, we will add an "Edit" button. When the user clicks the button, the editing functionality of the corresponding cell is enabled.

Here is the basic code for the edit button we will add to the table:

<template>
  <!---  添加按钮  -->
  <table>
    <!---  前面的表头和tbody就不再赘述  -->
    <tfoot>
      <tr>
        <td colspan="3">
          <button @click="addRow">Add Row</button>
        </td>
      </tr>
    </tfoot>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    addRow() {
      this.items.push({
        name: '',
        quantity: 0,
        price: 0
      })
    }
  }
}
</script>

We have added a button and when the user clicks the button, addRow## will be called #method. This method will add a new item object to the items array with initial values ​​of empty string, 0, and 0.

Step 4: Enable cell editing

Now, we have the ability to add new rows. The next step is to enable cell editing. Once the user clicks the edit button, we will make the relevant cell editable.

We will use the following code to enable cell editing:

<template>
  <table>
    <!---  前面的表头、tbody和tfoot  -->

    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'name')">{{ item.name }}</td>
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'quantity')">{{ item.quantity }}</td>
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'price')">{{ item.price }}</td>
        <td>
          <button @click="toggleRowEdit(index)">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    addRow() {
      // 添加新行
    },
    toggleRowEdit(index) {
      let item = this.items[index]
      item.editable = !item.editable
    },
    toggleCellEdit(index, key) {
      let item = this.items[index]
      if (item.editable) {
        return
      }
      item.editable = true
      let el = this.$refs['cell-' + index + '-' + key]
      let oldVal = el.innerText
      el.innerHTML = '<input type="text" value="' + oldVal + '" @blur="cellEditDone(' + index + ', '' + key + '', $event)">'
      el.focus()

    },
    cellEditDone(index, key, event) {
      let item = this.items[index]
      item.editable = false
      item[key] = event.target.value
    }
  }
}
</script>

We will add a top-level attribute "editable" to track the edit status of table rows and cells. By default, editable is set to false.

Using the

toggleRowEdit method, we can toggle the state of the row when the edit button is clicked. If the row is currently unedited, the function sets the row's editable value to true and adds a text box to the cell to enable the editable state. In this state, if we click on another cell, we will use the toggleCellEdit method to toggle the state of the cell.

This method replaces the original text with the HTML element containing the text box and focuses it into the text box. After the input is complete, the cell edit completion method

cellEditDone will be called to update the value into the data collection and close the editing state.

Step 5: Run the App

We are ready to run the application and test the editable form. Here is a basic Vue.js context used to render and test our editable table component:

<template>
  <div>
    <table-component :items="items" />
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'

export default {
  name: 'App',
  components: {
    TableComponent
  },
  data: {
    items: [
      { name: 'Item 1', quantity: 1, price: 10 },
      { name: 'Item 2', quantity: 2, price: 20 },
      { name: 'Item 3', quantity: 3, price: 30 }
    ]
  }
}
</script>

We pass it to the table component when initializing it using the item property. This will allow the component instance to access our data object and render it in the table. The ability to add new rows and edit existing rows works just fine.

Summary

In this article, we learned how to create an editable table using Vue.js. We learned how to use Vue components to organize tables, how to enable editability, and how to process input and save it to our data collection. We've provided complete code examples for your convenience to use and test. By using the techniques explored in this article, you can quickly and easily create fully functional and highly customizable forms to improve your web application user experience.

The above is the detailed content of How to implement editable tables in Vue. For more information, please follow other related articles on the PHP Chinese website!