el‐table - daniel-qa/Vue GitHub Wiki

el-table

#

範例1: 最單純簡單的表格

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" width="100" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>

<script setup>
import { ref } from "vue";

const tableData = ref([
  { name: "张三", age: 28, address: "北京市朝阳区" },
  { name: "李四", age: 32, address: "上海市浦东新区" },
  { name: "王五", age: 25, address: "广州市天河区" },
]);
</script>

el 中，預設單位是 px

  • 说明：

:data="tableData" 绑定数据列表。

border 属性让表格带有边框。

el-table-column 通过 prop 绑定数据字段，并指定 label 作为表头标题。

範例2 : 最後有一個按鍵

<template>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="age" label="年龄" width="100" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作" width="120" align="center">
            <template #default="{ row }">
                <el-button type="primary" size="small" @click="handleView(row)">
                    查看
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
    import { ref } from "vue";
    import { ElMessage } from "element-plus";

    const tableData = ref([
        { id: 1, name: "张三", age: 28, address: "北京市朝阳区" },
        { id: 2, name: "李四", age: 32, address: "上海市浦东新区" },
        { id: 3, name: "王五", age: 25, address: "广州市天河区" },
    ]);

    const handleView = (row) => {
        ElMessage.info(`查看用户：${row.name}`);
    };
</script>

<template #default="{ row }"> 這部分的內容會對應到每行資料。

key 和 row-key

:key：主要用於 Vue 虛擬 DOM 的更新和渲染，幫助 Vue 高效地處理 DOM 元素。

row-key：主要用於 el-table，告訴表格每行資料的唯一標識符，幫助管理表格中的行操作，如選擇、排序、篩選等。

  • 影響範圍：

:key：用來優化渲染過程，但不直接影響表格內的行操作。

row-key：直接影響表格行的操作，如選中、排序、更新等，並且需要確保每行資料的 row-key 是唯一的。

  • 使用情境：

:key：在 el-table 外部，或需要直接管理表格行的渲染邏輯時使用。

row-key：在需要處理表格資料行選中、排序、篩選等狀態時使用。

:key 範例

<el-table :data="tableData" border :key="row.id">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" width="100" />
</el-table>

在這個例子中，:key="row.id" 幫助 Vue 根據每行資料的 id 屬性來高效渲染每一行資料。

row-key

<el-table :data="tableData" border row-key="id">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄" width="100" />
</el-table>

在這個例子中，row-key="id" 告訴 el-table 每一行資料的唯一標識符是 id，這樣在表格的操作中（例如，選中行、排序或過濾）可以使用這個 id 來精確識別行。

表格寬度

如果你想要某些欄位自動撐滿，可以使用 :style="{ flexGrow: 1 }" 搭配 min-width，這樣 主題 和 內容 會撐滿可用空間，而 接收名單 和 時間 會維持固定寬度：

這樣 主題 和 內容 會平均分配剩餘空間，其他欄位則保持固定大小。

min-width="150" :style="{ flexGrow: 1 }"

<el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="subject" label="主題" min-width="150" :style="{ flexGrow: 1 }" />
    <el-table-column prop="content" label="內容" min-width="200" :style="{ flexGrow: 1 }" />
    <el-table-column prop="recipients" label="接收名單" width="200" />
    <el-table-column prop="date" label="時間" width="150" />
    <el-table-column label="操作" width="120">
        <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleView(row)">
                查看
            </el-button>
        </template>
    </el-table-column>
</el-table>

設定標題的背景色

header-cell-style是表头单元格的 style 的回调方法

<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}">
...
</el-table>
  • 深色主題
<el-table :header-cell-style="{background:'#004d8c',color:'#FFFFFF'}">
...
</el-table>
⚠️ **GitHub.com Fallback** ⚠️