Vue项目中如何将表格自定义模板作为prop传递给通用datatable组件

实现逻辑 #

通过框架原生的动态渲染能力，将自定义列的渲染逻辑作为参数传入公共组件，无需修改公共组件内部代码即可适配不同业务场景的自定义需求。

Vue 框架实现 #

推荐优先使用作用域插槽实现，也支持将渲染逻辑作为prop传入：

公共子组件改造 #

<!-- TableCommon.vue -->
<template>
  <el-table :data="tableData">
    <!-- 内置固定列 -->
    <el-table-column prop="id" label="主键ID" />
    <el-table-column prop="createTime" label="创建时间" />
    <!-- 自定义列插槽，透出当前行、索引参数 -->
    <slot name="customColumns" v-bind="{ row, index }" />
    <!-- 若需使用prop传模板，用动态组件渲染即可 -->
    <!-- <el-table-column v-for="col in customColumns" :key="col.prop">
      <component :is="col.render(row)" />
    </el-table-column> -->
  </el-table>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    // 若使用prop传模板，新增该prop接收自定义列配置
    // customColumns: {
    //   type: Array,
    //   default: () => []
    // }
  }
}
</script>

父组件调用 #

<!-- 业务页面 -->
<template>
  <TableCommon :tableData="pageList">
    <template #customColumns="{ row, index }">
      <!-- 按需写当前场景的自定义列，不需要修改公共组件 -->
      <el-table-column label="操作">
        <el-button type="text" @click="editRow(row)">编辑</el-button>
        <el-button type="text" @click="delRow(row)">删除</el-button>
      </el-table-column>
      <el-table-column label="订单状态">
        <el-tag :type="row.status === 1 ? 'success' : 'danger'">
          {{ row.status === 1 ? '已完成' : '待支付' }}
        </el-tag>
      </el-table-column>
    </template>
  </TableCommon>
</template>

React 框架实现 #

直接将自定义列的渲染函数作为prop传入即可：

公共子组件改造 #

// TableCommon.jsx
import { Table } from 'antd'
const TableCommon = ({ tableData, customColumns = [] }) => {
  const baseColumns = [
    { dataIndex: 'id', title: '主键ID' },
    { dataIndex: 'createTime', title: '创建时间' }
  ]
  // 合并内置列和业务自定义列
  const finalColumns = [...baseColumns, ...customColumns]
  return <Table dataSource={tableData} columns={finalColumns} />
}
export default TableCommon

父组件调用 #

// 业务页面
import TableCommon from './TableCommon'
import { Tag, Button } from 'antd'
const BusinessPage = () => {
  const pageList = []
  const customColumns = [
    {
      title: '操作',
      render: (_, record) => <>
        <Button type="link" onClick={() => editRow(record)}>编辑</Button>
        <Button type="link" danger onClick={() => delRow(record)}>删除</Button>
      </>
    },
    {
      title: '订单状态',
      render: (_, record) => <Tag color={record.status === 1 ? 'green' : 'red'}>
        {record.status === 1 ? '已完成' : '待支付'}
      </Tag>
    }
  ]
  return <TableCommon tableData={pageList} customColumns={customColumns} />
}
export default BusinessPage

以上方案均不需要修改公共组件的内部代码，每个业务场景只需要传入对应自定义列的渲染逻辑即可，适配任意自定义字段模板需求。

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