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;
      // float: left;
    }
  }
}

這樣下來後還是 很完美終於可以給ant 點讚了。

行點擊事件與check複選框列的處理

:customRow="handleRowClick"
:rowSelection="getIsRowSelect()"

代碼：

getIsRowSelect() {
      if (this.attrBute.isCheck) {
        return { onChange: this.onSelectChange, selectedRowKeys: this.selectedRowKeys };
      } else {
        return null;
      }
    },
    handleRowClick(record) {
      let _this = this;
      return {
        on: {
          click: e => {
            if (_this.getParentDomWithClassName(e.target)) return; 
            // if (e.target.className == "edit-table-cell") return;
            let code = record.key ? "key" : _this.columnFields.key;
            if (_this.attrBute.isCheck) {
              _this.resetArr(_this.selectedRows, _this.selectedRowKeys, record, record[code]);
              _this.$emit("rowSelect", _this.selectedRows);
            } else {
              _this.selectedRowKeys = record[code];
              _this.selectedRows = record;
              _this.$emit("rowSelect", _this.selectedRows);
            }
          }
        }
      };
    },

getParentDomWithClassName 這個方法是爲了 解決 操作列按鈕 點擊以及 可編輯表格事件觸發時會同時觸發行點擊事件。
這是對外暴露的設置行選中

    // 傳 行數據
    setSelectRowsWithKey(rows) {
      let _this = this;
      let code = rows.key ? "key" : _this.columnFields.key;
      rows.forEach(row => {
        let key = row[code];
        _this.resetArr(_this.selectedRows, _this.selectedRowKeys, row, key);
      });
    },
    resetArr(rows, keys, row, key) {
      let pos = keys.indexOf(key);
      if (pos < 0) {
        keys.push(key);
        rows.push(row);
      } else {
        keys.splice(pos, 1);
        rows.splice(pos, 1);
      }
    },

接下來要說的是滾動加載問題

記得表格 要設置

 :loading="isLoad"
 v-loadmore="loadMore"

滾動加載 需要綁定 scroll 事件，

import scroller from "../commonJs/table-scroller.js";
Vue.use(scroller);

export default {
  install(Vue) {
    Vue.mixin({
      directives: {
        loadmore: {
          bind(el, binding) {
            window.setTimeout(function() {
              let selectWrap = el.querySelector(".ant-table-body");
              if (!selectWrap) selectWrap = el.querySelector(".el-table__body-wrapper");
              var lastScrollTop = 0;
              selectWrap.addEventListener("scroll", function() {
                let sign = 200;
                if (lastScrollTop != this.scrollTop) {
                  lastScrollTop = this.scrollTop;
                  const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
                  if (scrollDistance <= sign) {
                    binding.value();
                  }
                }
              });
            }, 2000);
          }
        }
      }
    });
  }
};

接下來就是自己實現的 loadMore 方法

if (!this.isLoad) {
        if (this.tableBody.length >= this.pageTotal && this.tableBody.length > 0) return;
          this.pageNumber++;
          // 方式 多次加載
          this.isLoad = true;
          this.getCallService();
      } else {
        return;
      }