需求背景：
用来统计房间里住户的信息
实现效果：
实现过程：
表头：问题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></a-tooltip></template><!-- 这个地方作用是循环对应的columns里面的scopedSlots，自定义每个表格除表头里面的内容 --><!-- :slot="col.name" 这个循环出来的就是对应columns里面的 scopedSlots--><!-- slot-scope="text"里面的text，指的就是tableData里面循环对应的每一组数据 --><template v-for="(col, index) in headerCol" :slot="col.name" slot-scope="text"><div :key="index">{{text.headerTitle}}</div></template><!-- 这里是循环对应的columns里面的slots，自定义每个表头里面的内容--><!-- :slot="col.title" 这个循环出来的就是对应columns里面的 slots--><span v-for="(col, index) in headerCol" :slot="col.title" :key="index">{{col.header}}<a-tooltip :overlayStyle="{ maxWidth: '800px' }"><template slot="title"><span v-html="col.desc"></span></template><a-icon v-if="col.desc" theme="twoTone" type="info-circle" /></a-tooltip></span></a-table></div></template><script>export default {name: 'QuestionTable',props: {},data () {return {question: {children: [{children: [{des: '<div>居主人A的描述</div>',name: '居主人a',headerTitle: '111'},{des: '<div>居主人B的描述</div>',name: '居主人b',headerTitle: '222'},{des: '<div>居主人c的描述</div>',name: '居主人c',headerTitle: '333'},{des: '<div>居主人d的描述</div>',name: '居主人d',headerTitle: '444'}],name: '一号房'},{children: [{des: '<div>居主人A的描述</div>',name: '居主人a',headerTitle: '777'},{des: '<div>居主人b的描述</div>',name: '居主人b',headerTitle: '888'},{des: '<div>居主人c的描述</div>',name: '居主人c',headerTitle: '666'},{des: '<div>居主人d的描述</div>',name: '居主人d',headerTitle: '999'}],name: '二号房'}]},tableData: [],columns: [],headerCol: []}},created () {this.initTable()},methods: {initTable () {if (this.question && this.question.children && this.question.children.length) {let tableData = []let headerCol = []let columns = [{title: '房间号',dataIndex: 'subName',width: 100,scopedSlots: { customRender: 'subName' }}]this.question.children.map((subItem, subIndex) => {let item = { subName: subItem.name }if (subItem.children && subItem.children.length) {let len = subItem.children.lengthif (subIndex === 0 && len > 3) {columns = [{title: '房间号',dataIndex: 'subName',width: 100,fixed: 'left',// 这个地方的判断，是因为，如果数据过多，一行展示不出来// 用左侧固定，横向滚动条的方式来，scopedSlots: { customRender: 'subName' }}]}subItem.children.map((questionItem, index) => {if (subIndex === 0) {headerCol.push({name: 'question' + index,desc: questionItem.des,title: 'customTitle' + index,header: questionItem.name})columns.push({dataIndex: 'question' + index,// 只有三个children时，显示还比较均匀，超过三个就需要用fixedwidth: len > 3 ? 200 : '',slots: { title: 'customTitle' + index },scopedSlots: { customRender: 'question' + index }})}let str = 'question' + indexitem[str] = questionItem})tableData.push(item)}})this.tableData = [...tableData]this.headerCol = [...headerCol]this.columns = [...columns]}}}}</script><style scoped>th,td {text-align: center !important;}.ellipsis{display: inline-block;width: 90px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}</style>
