揭秘ant-design-vue中表格自定义列的奥秘

自定义 Ant Design Vue 表格列的艺术

在 Ant Design Vue 项目中使用 a-table 控件时，您可能会遇到需要显示序号列、图像、超链接或按钮等 UI 信息的情况。本文将探索使用 customCell 和 customRender 属性轻松实现这些需求的方法。

自定义单元格 (customCell)

customCell 允许您在表格单元格中渲染自定义内容。您可以使用它来显示序号、图标或进度条。

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column prop="age" custom-cell="age-custom-cell" />
  <a-table-column prop="address" custom-cell="address-custom-cell" />
</a-table>

const ageCustomCell = (h, params) => {
  return <span>{params.row.age}</span>;
};

const addressCustomCell = (h, params) => {
  return <span>{params.row.address}</span>;
};

自定义渲染 (customRender)

customRender 允许您自定义渲染整个表格行。您可以使用它来在行中显示额外信息或操作按钮。

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column prop="name" custom-render="name-custom-render" />
  <a-table-column prop="age" custom-render="age-custom-render" />
</a-table>

const nameCustomRender = (h, params) => {
  return <span>{params.row.name}</span>;
};

const ageCustomRender = (h, params) => {
  return <span>{params.row.age}</span>;
};

插槽和作用域插槽

除了 customCell 和 customRender，您还可以使用插槽和作用域插槽来自定义表格。插槽允许您在表格中定义自定义内容，而作用域插槽允许您在表格中定义自定义内容并访问当前行的属性。

插槽

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column prop="name">
    <template slot="header">
      <span>姓名</span>
    </template>
  </a-table-column>
  <a-table-column prop="age">
    <template slot="header">
      <span>年龄</span>
    </template>
  </a-table-column>
</a-table>

作用域插槽

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column prop="name">
    <scoped-slot name="header" scope="props">
      <span>姓名：{props.row.name}</span>
    </scoped-slot>
  </a-table-column>
  <a-table-column prop="age">
    <scoped-slot name="header" scope="props">
      <span>年龄：{props.row.age}</span>
    </scoped-slot>
  </a-table-column>
</a-table>

进阶技巧

访问当前行的属性

您可以使用 slotScope 访问当前行的属性。例如，您可以在插槽中使用以下代码来获取当前行的 name 属性：

<template slot="header" slot-scope="props">
  <span>姓名：{props.row.name}</span>
</template>

使用渲染函数

您还可以使用渲染函数来定义自定义内容。例如，您可以在作用域插槽中使用以下代码来渲染一个按钮：

<scoped-slot name="header" scope="props">
  <button @click="onButtonClick(props.row)">按钮</button>
</scoped-slot>

methods: {
  onButtonClick(row) {
    console.log(row);
  },
}

参考文献

• Ant Design Vue Table Documentation
• Custom Cell
• Custom Render
• Slots
• Scoped Slots

常见问题解答

1. 如何显示序号列？

使用 customCell 属性，您可以通过以下方式显示序号列：

const序号CustomCell = (h, params) => {
  return <span>{params.index + 1}</span>;
};

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column custom-cell="序号CustomCell" />
</a-table>

2. 如何在单元格中显示图像？

使用 customCell 属性，您可以通过以下方式在单元格中显示图像：

const imageCustomCell = (h, params) => {
  return <a-image :src="params.row.image" />;
};

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column prop="image" custom-cell="imageCustomCell" />
</a-table>

3. 如何在单元格中显示超链接？

使用 customCell 属性，您可以通过以下方式在单元格中显示超链接：

const linkCustomCell = (h, params) => {
  return <a-link href={params.row.link}>{params.row.link}</a-link>;
};

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column prop="link" custom-cell="linkCustomCell" />
</a-table>

4. 如何在单元格中显示按钮？

使用 customRender 属性，您可以通过以下方式在单元格中显示按钮：

const buttonCustomRender = (h, params) => {
  return <a-button @click="onButtonClick(params.row)">按钮</a-button>;
};

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column custom-render="buttonCustomRender" />
</a-table>

methods: {
  onButtonClick(row) {
    console.log(row);
  },
}

5. 如何自定义表格标题？

您可以使用插槽或作用域插槽来自定义表格标题。例如，使用插槽，您可以通过以下方式自定义名称列的

<a-table :columns="columns" :data-source="dataSource" rowKey="id">
  <a-table-column prop="name">
    <template slot="header">
      <span>自定义名称</span>
    </template>
  </a-table-column>
</a-table>