CSS妙用，el-table中字段長度顯示過長怎么辦

　　el-table中有些字段的長度太長，例如描述，備注等字段，一旦字數超過了列頭寬度的限制，就會被擠下另一行，導致table的每一行的高度不一致，看起來很不美觀

　　查閱官方手冊，其實是有提供一個 show-overflow-tooltip 屬性的。使用了此屬性的情況下，能夠實現當內容過長隱藏並顯示 tooltip，顯示效果如下

 　　其實挺好看的，但是還是有點美中不足，鼠標不能移入tooltip進行復制，查看過官方手冊中tooltip的屬性，原本組件是支持的，但是寫進el-table的時候不知官方處於什么考慮，將enterable默認設置為了false。

 　　沒有選擇的余地，業務需求又需要，於是也就只能自己重新仿造寫一個了。

<el-table>
    <el-table-column
           label="備注">
           <template slot-scope="scope">
                  <div v-if='scope.row.XXXX && (scope.row.XXXX.length>16)'>
                      <el-popover title="詳細" trigger="hover" placement="top" width="200">
                           <p>{{ scope.row.XXXX }}</p>
                          <div slot="reference">
                               <p size="medium">{{ scope.row.XXXX | XXXX}}</p>
                           </div>
                       </el-popover>
                   </div>
                   <div v-else>
                       <span>{{ scope.row.XXXX}}</span>
                  </div>
             </template>
      </el-table-column>
</el-table>

　　這里用了el-popover，其實和el-tooltip挺像的，基本用法也差不多。想限制的字體長度自己決定，再搭配上一個過濾器。

filters:{
        XXXX(value){
            if(!value){
                return
            }else{
                if(value.length>16){
                    var target=value.substr(0,16)+'....'
                }else{
                    target=value
                }
                return target;
            }
        },
    }

　　然后，看圖

　　大致就這樣了，但是又覺得不完美，首先，不能自適應屏幕寬度，js中的字體長度限制的不好還是會出現換行的情況，於是，就又升級了一版

<el-table>
   <el-table-column
        label="備注">
        <template slot-scope="scope"> 
                  <el-popover title="詳細" trigger="hover" placement="top" width="200">
                      <p>{{ scope.row.XXXX }}</p>
                      <div slot="reference">
                      <p size="medium" style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;">{{ scope.row.XXXX}}</p>
                  </div>
              </el-popover>        
        </template>
   </el-table-column>
</el-table>

　　看出了主要差別了么，主要就是那3句css，總結下來就是不換行，超過寬度部分隱藏，文字超過寬度顯示省略符號來代表被修剪的文本，代碼卻少了好多

　　果然還是老話說的好，能css解決的，就不要js解決。