el‐table - daniel-qa/Vue GitHub Wiki
- 轉換表
// 發送類型對應的中文名稱
const msgTypeMap = {
notify: '端外',
sms: '簡訊',
mail: 'mail',
}
* 部分套用代碼
...
return {
subject: item.subject,
theme: item.theme,
content: item.content,
selType: selTypeMap[item.selType],
msgType: msgTypeMap[item.msgType],
sendTime: new Date(item.sendTime).toLocaleString(), // for display
sendTimestamp: new Date(item.sendTime).getTime(), // for sorting
searchContent,
};
- CSS 多行裁切
<el-table-column label="內容" :width="300">
<template #default="{ row }">
<div class="limited-height"
v-html="row.content"></div>
</template>
</el-table-column>
.limited-height {
max-height: 3.2em; /* 控制最多顯示 2 行左右 */
overflow: hidden;
position: relative;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2; /* 顯示幾行就寫幾 */
-webkit-box-orient: vertical;
word-break: break-word;
}
這段 CSS 是專門為「多行裁切」設計的，它會：
保留 < br> 效果（因為 v-html 生效）
自動裁切多餘的內容
自帶「...」結尾（由於裁切後不可見）
可篩選每筆資料中，比較複雜的資料
<el-table-column label="搜尋內容">
<template #default="{ row }">
<span>
{{ row.searchContent.map(s => s.name).join('、') }}
</span>
</template>
</el-table-column>
解法：使用 formatter 來格式化時間
你可以在 裡加上 :formatter：
<el-table-column
label="發送時間"
prop="deliveryTime"
:formatter="formatDeliveryTime"
/>
然後在 <script setup> 裡加上這段：
function formatDeliveryTime(row) {
if (!row.deliveryTime) return '-'
const date = new Date(row.deliveryTime * 1000) // Linux timestamp 是秒，要轉成毫秒
const yyyy = date.getFullYear()
const mm = String(date.getMonth() + 1).padStart(2, '0')
const dd = String(date.getDate()).padStart(2, '0')
const hh = String(date.getHours()).padStart(2, '0')
const mi = String(date.getMinutes()).padStart(2, '0')
return `${yyyy}/${mm}/${dd} ${hh}:${mi}`
}
<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 作为表头标题。
<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：主要用於 Vue 虛擬 DOM 的更新和渲染，幫助 Vue 高效地處理 DOM 元素。
row-key：主要用於 el-table，告訴表格每行資料的唯一標識符，幫助管理表格中的行操作，如選擇、排序、篩選等。
- 影響範圍：
:key：用來優化渲染過程，但不直接影響表格內的行操作。
row-key：直接影響表格行的操作，如選中、排序、更新等，並且需要確保每行資料的 row-key 是唯一的。
- 使用情境：
:key：在 el-table 外部，或需要直接管理表格行的渲染邏輯時使用。
row-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 屬性來高效渲染每一行資料。
<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>