vue3 table組件如何使用

Vue3 Table組件如何使用

在Vue3中，Table組件是一個非常常用的UI組件，用于展示表格數據。本文將詳細介紹如何在Vue3中使用Table組件，包括基本用法、自定義列、分頁、排序等功能。

1. 安裝與引入

首先，確保你已經安裝了Vue3。如果你使用的是Vue CLI創建的項目，可以直接在項目中引入Table組件。如果你使用的是其他構建工具，可以通過npm或yarn安裝Vue3。

npm install vue@next

接下來，我們需要引入Table組件。Vue3本身并沒有內置的Table組件，但我們可以使用第三方庫，如element-plus或ant-design-vue，它們都提供了功能豐富的Table組件。

以element-plus為例，首先安裝它：

npm install element-plus --save

然后在main.js中引入并注冊：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

2. 基本用法

在Vue3中使用element-plus的Table組件非常簡單。以下是一個基本的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '張三',
          address: '北京市朝陽區'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦東新區'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '廣州市天河區'
        }
      ]
    };
  }
};
</script>

在這個例子中，我們使用了el-table和el-table-column組件來創建一個簡單的表格。el-table的data屬性綁定了一個數組tableData，數組中的每個對象代表一行數據。el-table-column組件的prop屬性指定了數據對象的屬性名，label屬性指定了列名。

3. 自定義列

有時候我們需要自定義列的內容，比如在某一列中顯示按鈕、圖標或其他復雜的HTML結構。我們可以通過slot來實現自定義列。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '張三',
          address: '北京市朝陽區'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦東新區'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '廣州市天河區'
        }
      ]
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log('編輯', index, row);
    },
    handleDelete(index, row) {
      console.log('刪除', index, row);
    }
  }
};
</script>

在這個例子中，我們通過slot自定義了一個操作列，列中包含了兩個按鈕：編輯和刪除。scope對象包含了當前行的索引和數據，我們可以通過scope.$index和scope.row來獲取這些信息。

4. 分頁

當數據量較大時，我們通常需要對表格進行分頁。element-plus提供了el-pagination組件來實現分頁功能。

<template>
  <div>
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="tableData.length"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 假設有100條數據
        ...Array.from({ length: 100 }, (_, i) => ({
          date: `2023-10-${i + 1}`,
          name: `用戶${i + 1}`,
          address: `地址${i + 1}`
        }))
      ],
      currentPage: 1,
      pageSize: 10
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

在這個例子中，我們通過el-pagination組件實現了分頁功能。currentPage表示當前頁碼，pageSize表示每頁顯示的數據條數。tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)用于根據當前頁碼和每頁條數截取數據。

5. 排序

element-plus的Table組件還支持排序功能。我們可以通過sortable屬性來啟用列的排序功能。

<template>
  <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange">
    <el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
    <el-table-column prop="name" label="姓名" width="180" sortable></el-table-column>
    <el-table-column prop="address" label="地址" sortable></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '張三',
          address: '北京市朝陽區'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦東新區'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '廣州市天河區'
        }
      ]
    };
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      console.log('排序', column, prop, order);
      // 根據prop和order對tableData進行排序
      this.tableData.sort((a, b) => {
        if (order === 'ascending') {
          return a[prop] > b[prop] ? 1 : -1;
        } else {
          return a[prop] < b[prop] ? 1 : -1;
        }
      });
    }
  }
};
</script>

在這個例子中，我們通過sortable屬性啟用了列的排序功能，并通過@sort-change事件監聽排序變化。handleSortChange方法會根據排序的列和順序對tableData進行排序。

6. 總結

本文介紹了如何在Vue3中使用element-plus的Table組件，包括基本用法、自定義列、分頁和排序等功能。通過這些功能，我們可以輕松地創建功能豐富的表格組件，滿足各種業務需求。希望本文對你有所幫助！