Vue.js中如何通过列而非行扩展后端数据表格？

一、基础自定义列方案 #

直接在父组件中通过<TableCol>标签逐个定义列，把单元格的渲染逻辑封装到组件里，复用性和可读性更强：

1. 编写TableCol组件 #

<!-- TableCol.vue -->
<template>
  <td>
    <!-- 优先用插槽支持自定义内容，没有插槽时默认渲染字段值 -->
    <slot v-if="$slots.default" :row="row" />
    <span v-else>{{ row[field] }}</span>
  </td>
</template>

<script setup>
const props = defineProps({
  // 当前行的完整数据对象
  row: {
    type: Object,
    required: true
  },
  // 要渲染的字段名
  field: {
    type: String,
    required: true
  }
})
</script>

2. 父组件中使用 #

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, rowIndex) in store.selectedItems" :key="item.id">
        <!-- 普通字段列 -->
        <TableCol :row="item" field="name" />
        <TableCol :row="item" field="age" />
        <!-- 自定义内容列，通过插槽获取当前行数据 -->
        <TableCol :row="item">
          <template #default="{ row }">
            <button @click="editRow(row)">编辑</button>
            <button @click="deleteRow(row)">删除</button>
          </template>
        </TableCol>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import TableCol from './TableCol.vue'

const store = useStore() // 假设使用Pinia/Vuex

const editRow = (row) => { /* 编辑逻辑 */ }
const deleteRow = (row) => { /* 删除逻辑 */ }
</script>

二、保留columns配置的动态列方案 #

如果不想放弃原有的columns配置列表，也可以通过循环配置项动态渲染<TableCol>，兼顾配置灵活性和组件封装：

1. 扩展TableCol组件（支持自定义渲染逻辑） #

<!-- TableCol.vue -->
<template>
  <td>
    <slot v-if="$slots.default" :row="row" />
    <!-- 支持传入渲染函数自定义内容 -->
    <span v-else-if="render">{{ render(row) }}</span>
    <span v-else>{{ row[field] }}</span>
  </td>
</template>

<script setup>
defineProps({
  row: Object,
  field: String,
  // 可选：传入渲染函数自定义单元格内容
  render: Function
})
</script>

2. 父组件中动态渲染列 #

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.field">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, rowIndex) in store.selectedItems" :key="item.id">
        <TableCol 
          v-for="(col, colIndex) in columns" 
          :key="col.field"
          :row="item" 
          :field="col.field"
          :render="col.render"
        />
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import TableCol from './TableCol.vue'
import { h } from 'vue'

const store = useStore()

// 示例columns配置
const columns = [
  { title: '姓名', field: 'name' },
  { title: '年龄', field: 'age' },
  { 
    title: '操作', 
    render: (row) => h('button', { onClick: () => editRow(row) }, '编辑')
  }
]

const editRow = (row) => { /* 编辑逻辑 */ }
</script>

内容的提问来源于stack exchange，提问作者Dedede