iview中Tooltip組件和文本溢出結合使用，動態控制tooltip生效

場景：當給表格列或者列表統一設置文本溢出效果和tooltip提示效果時，有的文本未超長溢出，同樣出現了tooltip，不美觀。

思路：通過Tooltip組件的disabled屬性動態控制提示效果，通過比較元素的clientWidth和scrollWidth值大小來計算disabled值。

關於clientWidth、scrollWidth的解釋，參考：https://www.dazhuanlan.com/2020/05/06/5eb1da88a1cc5/

show下代碼：

1.html   

 <List :split="false" class="mt10 ml5 template-list">
          <ListItem v-for="(item,index) in templateList" :key="index">
            <Tooltip :content="item.name" :disabled="disabledCtrArr[index]"> 
              <div class="content-txt">
                <span>{{item.name}}</span>
              </div>
            </Tooltip>
          </ListItem>
  </List>

2.js

  mounted () {
    this.setDisabledCtrArr()
  },
  methods: {
    setDisabledCtrArr () {
      let arr = Array.from({ length: this.templateList.length }).map((item, index) => {
        let ele = document.getElementsByClassName('content-txt')[index]
        return ele.clientWidth >= ele.scrollWidth //核心代碼
      })
      this.disabledCtrArr = arr
    },
}

如此，便優雅了起來。看下效果。。。