antdesign vue组件问题（二）table 组件错位问题，滚动加载，行选中问题，树表格自定义节点图标

table 组件错位导致问题出现的原因很多；

1. 内容区超过td范围， ant 组件并不像ele 提供了 tool-tip展示，

解决办法：在每个单元格外包一层div 设置宽度 css 样式 处理成 文本溢出 省略号 代替显示

当然你回发现这样处理过后文本是不会超出了，但是错位问题还是没有解决。

2. index 列 和 check 列同时出现 会存在错位。

index 列 ant 是不支持 配置的， 只能这样，在表头数据中插入一项

arr.unshift({
          title: "序号",
          dataIndex: "index",
          width: this.indexWidth,
          render: (text, record, index) => `${index + 1}`
        });

当你缩放页面， 你会发现 表头的缩放过程和表体不一致， 这有导致了错位，，原因竟然是复选列和序号列的表头宽度和标题宽度不一致， 这时又一个属性出现了 :scroll="{ x: scrollX, y: scrollY }"， 通过设置 scroll 属性，官方意见是这样的

3. scroll

若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。

起初scrollX， 为所有列之和， 这样当表格不出现滚动条时不会错位， 但是当出现滚动条时有会错位。
顿时生无可恋。vue 对 aant来说真的是 捡来的。于是又各种调样式，发现居然解决不了。
最后鬼使神差 scrollX = 各列之和 + 100， 居然不错位了。

错位的问题终于解决了， 接下来谈谈其他关于table的问题，

树表格问题

树表格 ant是支持的， 并且支持自定义 展开 icon（我使用了 小三角）
于是 实现如下：

:expandIcon="props => customExpandIcon(props)"

    customExpandIcon(props) {
      if (props.record.children && props.record.children.length > 0) {
        if (props.expanded) {
          return (
            <a
              style={
  { color: "black" }}
              onClick={e => {
                props.onExpand(props.record, e);
              }}
            >
              <a-icon type="caret-down" style={
  { fontSize: 16 + "px" }} />
            </a>
          );
        } else {
          return (
            <a
              style={
  { color: "black" }}
              onClick={e => {
                props.onExpand(props.record, e);
              }}
            >
              <a-icon type="caret-right" style={
  { fontSize: 16 + "px" }} />
            </a>
          );
        }
      } else {
        return <span style={
  { marginRight: 8 + "px" }}></span>;
      }
    },

可以设置 indentSize， 节点缩进
还要修改一下 样式， 因为我在上边处理文本溢出时 包了一层 div
整个 组件 修改的 css 样式

.eg-base-table {
   
  .eg-td-overflow {
   
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .ant-table-body {
   
    word-break: break-all;
  }
  .ant-table-thead > tr > th {
   
    // padding: 9px 16px !important;
  }
  .ant-table-tbody > tr > td {
   
    // padding: 9px 16px !important;
    div {
   
      display: inline-block;
      vertical-align: text-bottom