Vue component practice: list component development

The list component is a common component in front-end development. It is widely used in scenarios such as displaying data and operating data. Through actual code examples, we introduce how to develop a Vue list component that is fully functional and easy to use.

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. Displays 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 pagination of task lists.

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

Execute the following commands 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();
  },
};

Summarize:

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.