Implementation method of editable table in Vue document

Vue.js is one of the most popular front-end frameworks at present. It uses a data-driven approach to build user interfaces and has the characteristics of two-way data binding and componentization. In the Vue.js documentation, a method for implementing an editable table is provided. This article will introduce the specific implementation steps of this method.

1. Prepare data

First, prepare a set of data, taking student information as an example. The data format can be an array, and each element contains attributes such as name, gender, age, etc.

students: [
   { name: '小明', gender: '男', age: 18 },
   { name: '小红', gender: '女', age: 17 },
   { name: '小刚', gender: '男', age: 19 },
   { name: '小丽', gender: '女', age: 18 }
]

2. Define the table

Next, you need to define a table component, which is used to display data and supports clicking to enter the edit mode to modify the data. The template syntax of Vue.js is used here to define the table, in which the v-for instruction is used to loop through the list data to display the information of each student; the v-if instruction is used to control the conditions for entering edit mode. The code is as follows:

<template>
   <table>
      <thead>
         <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th></th>
         </tr>
      </thead>
      <tbody>
         <tr v-for="(student, index) in students" :key="index">
            <td v-if="!student.editable">{{ student.name }}</td>
            <td v-else><input v-model="student.name" /></td>
            <td v-if="!student.editable">{{ student.gender }}</td>
            <td v-else>
               <select v-model="student.gender">
                  <option value="男">男</option>
                  <option value="女">女</option>
               </select>
            </td>
            <td v-if="!student.editable">{{ student.age }}</td>
            <td v-else><input v-model.number="student.age" /></td>
            <td>
               <button v-if="!student.editable" @click="toggleEdit(index)">编辑</button>
               <button v-else @click="toggleEdit(index)">保存</button>
            </td>
         </tr>
      </tbody>
   </table>
</template>

In the above code, the student.editable attribute is used to determine whether the current row of data is in edit mode. If it is false, the cell content is displayed, otherwise an input or select label is displayed. , allowing users to modify data. At the same time, a click event is bound at the end of the code to switch the editing mode.

In order to define the toggleEdit method used in the above code, we need to add some code to the script part of Vue.js.

<script>
export default {
   data() {
      return {
         students: [ // 准备数据
            { name: '小明', gender: '男', age: 18 },
            { name: '小红', gender: '女', age: 17 },
            { name: '小刚', gender: '男', age: 19 },
            { name: '小丽', gender: '女', age: 18 }
         ]
      };
   },
   methods: {
      toggleEdit(index) {
         this.students[index].editable = !this.students[index].editable;
      }
   }
};
</script>

In the above code, the toggleEdit method is used to switch the editable state of the element at the specified index position. At the same time, add the editable attribute to the data option, and the initial value is false.

data() {
   return {
      students: [
         { name: '小明', gender: '男', age: 18, editable: false },
         { name: '小红', gender: '女', age: 17, editable: false },
         { name: '小刚', gender: '男', age: 19, editable: false },
         { name: '小丽', gender: '女', age: 18, editable: false }
      ]
   };
}

3. Complete

After completing the writing of the above code, you can implement a simple, editable form. The user can enter the editing mode by clicking the "Edit" button, modify the data, and click the "Save" button again to complete the modification and exit the editing mode.

In actual use, you may need to add some data verification, submission and other functions. However, we can quickly implement these functions and improve development efficiency through the above methods and other features of Vue.js.

The above is the detailed content of Implementation method of editable table in Vue document. For more information, please follow other related articles on the PHP Chinese website!