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" 列的数据；
-   对于其他列，我们直接展示列中的数据。