Vue.js中如何实现以列表首列为表头

前言

一般情况table列表的展示，列头都在第一横行，此方法用于列头在第一列的情况。

效果图

核心代码

<template><div><table class="data-table"><tr v-for="(column, columnIndex) in columns" :key="'column-' + columnIndex"><th class="header-cell">{{ column }}</th><td v-for="(row, rowIndex) in data" :key="'row-' + rowIndex" style="border: 1px solid black;"><!-- 如果当前列是"name", 则显示一个带有名字的按钮 --><div v-if="column === 'name'">{{ row[column] }}<button type="button" @click="handleButtonClick">Click Me</button></div><!-- 如果当前列是 "image", 显示图片 --><img v-else-if="column === 'image'" :src="row[column]" alt="Image" /><span v-else>{{ row[column] }}</span></td></tr></table></div>
</template>

<script>
export default {data () {return {// 一般为后端接收数据，视情况而定data: [{ name: 'a', age: '1', image: 'https://example.com/image1.png' },{ name: 'b', age: '2', image: 'https://example.com/image2.png' },{ name: 'c', age: '3', image: 'https://example.com/image3.png' },// 更多数据...],columns: ['name', 'age', 'image'],};},methods: {handleButtonClick() {alert('Button clicked!');},},
};
</script>

<style scoped>
.data-table {border-collapse: collapse; /* 删除边框之间的间距 */width: 100%; /* 表格全宽 */max-width: 600px; /* 最大宽度 */margin: 0 auto; /* 水平居中 */background-color: #ddd;color: black;
}.header-cell,
.data-cell {border: 1px solid #ddd; /* 单元格边框 */padding: 8px; /* 单元格内边距 */text-align: left; /* 文本左对齐 */
}.header-cell {background-color: blanchedalmond; /* 表头背景 */font-weight: bold; /* 表头字体加粗 */color: black;
}
</style>

核心逻辑

首先，我们使用 Vue 的 `v-for` 指令来遍历我们的数据，分别创建行 `column` 和列 `row`。每个 <th> 标签用于表示头部单元格，而每个 <td> 标签为表格的数据单元格。最关键的部分是，我们要在每个 <td> 标签中加入逻辑判断，根据不同的列 "column"，展示不同的格式。在这个示例中，我们对 "name", "age" 和 "image" 三种列进行了处理：-   对于 "name" 列, 我们在显示名称数据后还附加了一个按钮，按钮点击后会调用 `handleButtonClick` 方法进行对应操作；
-   对于 "image" 列, 我们使用了 `v-else-if` 指令，此处我们显示一个对应的图片，图片链接为该行 "image" 列的数据；
-   对于其他列，我们直接展示列中的数据。