需求背景:
用来统计房间里住户的信息
实现效果:
实现过程:
表头:问题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