解决elementUI table表格的渲染位置错乱，相邻表头正常，但数据错乱或排序错误等问题，解决表格提示语无法复制的问题

  大家好，在使用elementUI表格时，有时会出现一些意料之外的问题，比如数据排序正常但表格显示、排序错乱等。
  在网上搜索后一般有2种解决方法：
  1.给表格每一项的el-table-column添加唯一的id用于区分。
  2.给表格每一项的el-table-column添加唯一的key用于区分。

<el-table-column
    prop="id"
    label="序号"
    min-width="50"
    :key="10001"
  ></el-table-column>
<el-table-column prop="name" label="名称" min-width="80" :key="10002">
   <template slot-scope="scope">
      <div>
        {{ scope.row.name || "—" }}
      </div>
   </template>
</el-table-column>
<el-table-column prop="number" label="数量" min-width="80" :key="10003">
   <template slot-scope="scope">
     <div>
       {{ scope.row.number || 0 }}
     </div>
   </template>
</el-table-column>
   <el-table-column prop="percentage" label="百分比" min-width="80" :key="10002" id="percentage" :sort-method="(a,b)=>{return a.percentage - b.percentage}" sortable v-element-table-tooltip>
      <template slot-scope="{}" slot="header">
        <span>百分比</span>
          <el-popover
            popper-class="my-el-popover"
            placement="right-start"
            title=""
            width="200"
            trigger="hover"
            content="这里是百分比"
          >
           <spanclass="tip-div" slot="reference">
             <i class="el-icon-question tip-icon"></i>
           </span>
         </el-popover>
       </template>
       <template slot-scope="scope">
         <div class="nowColor">
           {{ scope.row.percentage }}%
         </div>
       </template>
     </el-table-column>
  

以上2种方法大多数时候可以奏效，一旦列表使用了复杂数据的排序，以上2种方法便会失效，比如百分比排序。

查询elementUI官方文档发现，列表排序会使用elementUI默认的排序，效果可能与开发者想要的效果不一致。
百分比和数量两列的数据可能会显示错乱，但表头却显示正常。解决方法是使用自定义的排序方法：sort-method
关键代码如下：
使用自定义排序方法 :sort-method=“(a,b)=>{return a.percentage - b.percentage}” sortable

<el-table-column prop="percentage" label="百分比" min-width="80" :key="10002" id="percentage" :sort-method="(a,b)=>{return a.percentage - b.percentage}" sortable v-element-table-tooltip></el-table-column>
  

elementUI表格默认会显示提示语，但tooltip提示语经常无法复制，解决方法是使用：v-element-table-tooltip插件，可在提示悬浮窗中复制、勾选文字。
测试数据如下（可复制查看效果）

this.tableData = [{
  id: 1,
  name: "测试1号",
  number: 19,
  percentage: 52.01,
  rank: 49,
  rankRate: 81.29
}, {
  id: 2,
  name: "测试2号",
  number: 11,
  percentage: 42.01,
  rank: 11,
  rankRate: 42.01
}, {
  id: 3,
  name: "测试3号",
  number: 1,
  percentage: 2.01,
  rank: 1,
  rankRate: 2.01
}]

效果图如下：

最后，原创不易，如本文对您有所帮助，麻烦一键三连点个赞谢谢！