Ant Design 表格：循环展示表头，表头添加图标icon

最新推荐文章于 2024-08-30 18:36:22 发布

Crazy_GirlLL

最新推荐文章于 2024-08-30 18:36:22 发布

阅读量3.2k

点赞数 1

分类专栏：插件的使用日常踩坑 VUE 文章标签： vue Ant Design Vue vue递归循环使用自身组件

本文链接：https://blog.youkuaiyun.com/Crazy_GirlLL/article/details/121428247

版权

本文介绍如何在Vue项目中结合Ant Design Vue库，实现动态循环展示表格表头并添加图标icon，同时利用tooltip展示鼠标悬停效果。内容涉及到数据驱动的表头生成和组件递归使用。

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

需求背景：

用来统计房间里住户的信息

实现效果：

实现过程：

表头：问题a，问题b，问题c，是从动态数据循环获取得到的，包括右侧的icon，和鼠标以上显示的效果：tooltip

以下是代码实现：

使用时，须引入Ant Design

<template>
  <div style="margin-bottom:30px">
    <div style="margin-bottom:20px">{
  {question.name}}</div>
    <a-table :scroll="{ x: true }" :columns="columns" :data-source="tableData"
 bordered :pagination="false" :rowKey="row=>row.id">
      <!-- 左侧表头定死，数据自定义：数据过多就显示省略号
      用tooltip组件，鼠标移上显示全部的方式展示 -->
      <template slot="subName" :ellipsis="true" slot-scope="text">
        <a-tooltip :overlayStyle="{ maxWidth: '800px' }">
          <template slot="title">
            <span>{
  { text }}</span>
          </template>
          <span class="ellipsis">{
  { text }}</span>
        &l