Vue component practice: list component development

Vue component practice: list component development

Introduction:
The list component is a common component in front-end development. It is widely used to display data, Scenarios such as operating data. This article will introduce how to develop a fully functional and easy-to-use Vue list component through actual code examples.

1. Requirements Analysis
Before starting development, we need to clearly clarify the functions and requirements of the components. Suppose we need to implement a simple task management list component with the following functions:

1. Display a task list, including task name, description, status and other fields.
2. Supports sorting and filtering tasks.
3. Support adding, modifying and deleting tasks.
4. Supports paging of task lists.

2. Project settings
First, we need to create a Vue project and install the necessary dependencies.

Execute the following command on the command line:

vue create todo-list

Next, install axios and element-ui dependencies:

cd todo-list
npm install axios
npm install element-ui

3. Component development

1. Create the task list component TodoList.vue, and register the component in main.js:

   <template>
     <div>
    <el-table :data="taskList" border>
      <el-table-column prop="name" label="任务名称"></el-table-column>
      <el-table-column prop="description" label="任务描述"></el-table-column>
      <el-table-column prop="status" label="任务状态"></el-table-column>
    </el-table>
     </div>
   </template>
   
   <script>
   export default {
     name: "TodoList",
     data() {
    return {
      taskList: [], // 任务列表数据
    };
     },
   };
   </script>

2. Add task data:

   <template>
     ...
     <el-button type="primary" @click="addTask">新增任务</el-button>
   </template>
   
   <script>
   export default {
     ...
     methods: {
    addTask() {
      // 弹出对话框，输入任务信息
      // 调用接口保存数据
      // 刷新任务列表
    },
     },
   };
   </script>

3. Modify task data:

   <template>
     ...
     <el-table-column width="200px" label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="editTask(scope.row)">编辑</el-button>
    </template>
     </el-table-column>
   </template>
   
   <script>
   export default {
     ...
     methods: {
    editTask(row) {
      // 弹出对话框，显示任务信息
      // 调用接口更新数据
      // 刷新任务列表
    },
     },
   };
   </script>

4. Delete task data:

   <template>
     ...
     <el-table-column width="200px" label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="deleteTask(scope.row)">删除</el-button>
    </template>
     </el-table-column>
   </template>
   
   <script>
   export default {
     ...
     methods: {
    deleteTask(row) {
      // 弹出确认框，确认删除任务
      // 调用接口删除数据
      // 刷新任务列表
    },
     },
   };
   </script>

5. Paging function:

   <template>
     ...
     <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pagination.currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pagination.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total"
     ></el-pagination>
   </template>
   
   <script>
   export default {
     ...
     data() {
    return {
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
    };
     },
     methods: {
    handleSizeChange(newSize) {
      this.pagination.pageSize = newSize;
      // 刷新任务列表
    },
    handleCurrentChange(newPage) {
      this.pagination.currentPage = newPage;
      // 刷新任务列表
    },
     },
   };
   </script>

4. Interface request and data binding
Use the axios request interface in the component to obtain task list data, and bind the data to the taskList of the component.

import axios from 'axios';

export default {
  ...
  methods: {
    getTaskList() {
      axios.get('/api/tasks', {
        params: {
          currentPage: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
        },
      }).then((response) => {
        this.taskList = response.data.list;
        this.pagination.total = response.data.total;
      }).catch((error) => {
        console.error(error);
      });
    },
  },
  mounted() {
    this.getTaskList();
  },
};

5. Summary
Through the above examples, we have completed the development of a basic task management list component. In practice, we can further expand and optimize it according to specific needs.

The example introduced in this article is just an example of the development of Vue list components. The details and requirements in the actual development process may be different. I hope readers can understand the ideas and methods of Vue component development through this example, so that they can be used freely in actual projects.

The above is the relevant content of Vue component actual combat: list component development. Hope this helps!

The above is the detailed content of Vue component practice: list component development. For more information, please follow other related articles on the PHP Chinese website!