ホームページ > 記事 > ウェブフロントエンド > Vue コンポーネントの実践: リストコンポーネントの開発

Vue コンポーネントの実践: リストコンポーネントの開発

WBOYオリジナル: 2023-11-24 09:53:42698ブラウズ

はじめに:
リストコンポーネントは、フロントエンド開発における一般的なコンポーネントであり、データの表示に広く使用されています。、操作データなどのシナリオ。この記事では、実際のコード例を通して、完全に機能的で使いやすい Vue リストコンポーネントを開発する方法を紹介します。

1. 要件分析
開発を始める前に、コンポーネントの機能と要件を明確にする必要があります。次の関数を備えた単純なタスク管理リストコンポーネントを実装する必要があるとします。

タスク名、説明、ステータス、その他のフィールドを含むタスクリストを表示します。
タスクの並べ替えとフィルター処理をサポートします。
タスクの追加、変更、削除をサポートします。
タスクリストのページングをサポートします。

2. プロジェクト設定
まず、Vue プロジェクトを作成し、必要な依存関係をインストールする必要があります。

コマンドラインで次のコマンドを実行します:

vue create todo-list

次に、axios と element-ui の依存関係をインストールします:

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

3. コンポーネントの開発

タスクリストコンポーネント TodoList.vue を作成し、コンポーネントを 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>

タスクデータを追加します:

<template>
  ...
  <el-button type="primary" @click="addTask">新增任务</el-button>
</template>

<script>
export default {
  ...
  methods: {
 addTask() {
   // 弹出对话框，输入任务信息
   // 调用接口保存数据
   // 刷新任务列表
 },
  },
};
</script>

タスクデータの変更:

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

タスクデータの削除:

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

ページング関数:

<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. インターフェースリクエストとデータバインディング
コンポーネントの axios リクエストインターフェースを使用してタスクリストデータを取得し、そのデータをコンポーネントの taskList にバインドします。

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. まとめ
上記の例を通じて、基本的なタスク管理リストコンポーネントの開発が完了しました。実際には、特定のニーズに応じてさらに拡張し、最適化することができます。

この記事で紹介した例は、Vue リストコンポーネントの開発の一例であり、実際の開発プロセスでは詳細や要件が異なる場合があります。この例を通じて Vue コンポーネント開発の考え方や手法を理解していただき、実際のプロジェクトで自由に活用していただければ幸いです。

上記はVueコンポーネント実戦：リストコンポーネント開発の該当内容です。お役に立てれば！

以上がVue コンポーネントの実践: リストコンポーネントの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

接口 JS ui axios

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vueコンポーネント開発：ツールチップコンポーネントの実装方法次の記事：Vueコンポーネント開発：ツールチップコンポーネントの実装方法

続きを見る

Vue コンポーネントの実践: リスト コンポーネントの開発

関連記事

Vue コンポーネントの実践: リストコンポーネントの開発