antd-vue table表格添加文字提示

原创已于 2022-12-28 10:47:00 修改 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-07-29 16:52:26 首次发布

该博客介绍了如何在Ant Design Vue的表格组件中使用`slot`和`title`属性来自定义列头，并实现鼠标悬停时显示Tooltip提示的功能。示例代码展示了如何在`<a-table>`组件内设置`<span>`标签和`<a-tooltip>`组件，以展示自定义的表头名称和提示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <a-table :columns="columns" :data-source="data">
    <span slot="name">
     表头名称
        <a-tooltip>
            <template slot="title">
                 <span>提示内容</span>
            </template>
            <icon type="question-circle"></icon>  // 鼠标滑到图标时显示提示文字
        </a-tooltip>
    </span>
  </a-table>
</template>
<script lang="ts">

const columns = [
  {
    // title: 'Name',
    dataIndex: 'name',
    slots: { title: "name" }
    key: 'name',
  },
const data = [];

export default {
  data() {
    return {
      data,
      columns,
    }
  }
}
</script>

重点在于

1、slot一定要对应

2、title一定要注释