因为工作要求需要用到ant design pro for vue，又因为是第一次接触，所以遇到了很多问题，所以打算吧遇到的问题和解决方法放在这，仅供自己之后回头复习和当做备忘录。

1.table控件内容与列名无法对齐

查了好久，总算是解决了这个问题。

ant-design 里 table控件，在设置scroll之后，内容和列名不对齐，这时候要设置所有列的列宽为一个具体数值，然后设置scroll的x为所有列宽之和，这时如果依然出现不对齐的话，可能是宽度不够，内容把宽度撑开了，用控制台看一下表头宽度与自己设置的列宽是否一致，再进行调整，这样大概就没问题了。

2.table控件实现cell可编辑

我没有用官方文档里的方法，一是因为麻烦，二是因为我看不太懂（我太菜了），所以在网上搜索了各种实现方法，运用之后记在这里当做笔记，以防之后再用却忘了方法。

<template slot="alarmVlue" slot-scope="text, record">
  <a-input :value="text" @change="e => onImCellChange(e.target.value, record.key, 'alarmVlue')" />
</template>

首先是table里的template，因为要在input里显示用户本来设置的值，因此将value绑定上text，但是这会导致无法修改input中的value，因此使用@change方法，获取修改的值、值所在数组的第key个对象、以及对象中的alarmVlue属性，获取这些之后再根据这些参数去修改table的dataSourc中的数据，这样因为绑定的关系，input中的value也就改变了。

onImCellChange(value, key, col) {
        this.dataSource[key] = Object.assign(this.dataSource[key], {[col]: value})
},  //用户修改弹窗内的input修改

值得一提的是把对象中的key值用参数表示的话需要用"[ ]"框起来（这么基础的地方我也忘了……）。

3.调整tab页中多个table的样式

工作中出现了一种情况，要求我在三个tab页中分别放入一个table，这本身没什么问题，问题出在table的样式，首先，table要有固定的高度，即要求table不能高度自适应，无论是否有数据，或者数据是撑满表格最大高度还是没有撑满，table的高度都不能变，但是antDesign里的table虽然可以通过scroll中的y设置max-height，但是却不能设置min-height，我在这上面浪费了好久的时间，最终还是只能通过修改css样式来解决这个问题：

/deep/ .ant-table-content {
    max-height: 450px;
  }
/deep/ .ant-table-body {
    min-height: 370px;
  }

修改了content的最小高度，这样的话，即便表中没有数据，表格高度也依然保持450px，另外，还要修改table-body的高度，这样在有数据的时候也能保证，即便数据的数量不足以撑高370px，也要维持住370px的高度，这样横向滚动条（还有分页）就不会随着表格数据的条数所影响的表格高度而上下浮动了。

但是之后又出现了一个问题，这三个表格的表头是不一样高的，如果统一设置了body的高度，由于head的高度不一致，就会导致head加body的高度不一致，即表格高度不一致，为此我反复尝试之后决定这么做：

首先使用antdesign的table中自带的customHeaderRow来为后两个高度低于第一个表格高度的表的表头，增加class=“falg”属性。

<a-table
 :customHeaderRow="() => { return {class: 'flag'}}"
/>

 然后修改其样式，将其表头高度修改为与第一个表格表头高度持平，还为table数据中的最后一行添加了边缘线，因为原本是没有的。

/deep/ .ant-table-tbody tr:last-child{
    border-bottom: 1px solid #cccccc;
  }
/deep/ .flag {
    height: 75px;
  }

这样修改之后勉强达到了想要的效果，但是真的希望antDesign以后能够更新min-height的修改属性。