Pratique des composants Vue : développement de composants de liste

Pratique du composant Vue : développement de composants de liste

Introduction :
Le composant de liste est un composant courant dans le développement front-end. Il est largement utilisé dans des scénarios tels que l'affichage de données et les données d'exploitation. Cet article expliquera comment développer un composant de liste Vue entièrement fonctionnel et facile à utiliser à travers des exemples de code réels.

1. Analyse des exigences
Avant de commencer le développement, nous devons clarifier clairement les fonctions et les exigences des composants. Supposons que nous devions implémenter un simple composant de liste de gestion des tâches avec les fonctions suivantes :

1. Afficher une liste de tâches, comprenant le nom de la tâche, sa description, son statut et d'autres champs.
2. Prend en charge les tâches de tri et de filtrage.
3. Prise en charge de l'ajout, de la modification et de la suppression de tâches.
4. Prend en charge la pagination des listes de tâches.

2. Paramètres du projet
Tout d'abord, nous devons créer un projet Vue et installer les dépendances nécessaires.

Exécutez la commande suivante dans la ligne de commande :

vue create todo-list

Ensuite, installez les dépendances axios et element-ui :

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

3. Développement de composants

1. Créez le composant de liste de tâches TodoList.vue et enregistrez le composant dans 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. Ajouter des données de tâche :

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

3. Modifier les données de tâche :

   <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. Supprimer les données de tâche :

   <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. Fonction de pagination :

   <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>

IV. Demande d'interface et liaison de données
Dans L'interface de requête axios est utilisée dans le composant pour obtenir les données de la liste des tâches, et les données sont liées à la taskList du composant.

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. Résumé
Grâce aux exemples ci-dessus, nous avons achevé le développement d'un composant de base de liste de gestion des tâches. En pratique, nous pouvons l’étendre davantage et l’optimiser en fonction de besoins spécifiques.

L'exemple présenté dans cet article n'est qu'un exemple de développement de composants de liste Vue. Les détails et les exigences au cours du processus de développement réel peuvent être différents. J'espère que les lecteurs pourront comprendre les idées et les méthodes de développement des composants Vue à travers cet exemple, afin qu'ils puissent l'utiliser librement dans des projets réels.

Ce qui précède est le contenu pratique du composant Vue : développement de composants de liste. J'espère que cela aide!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!