iView表格排序问题

工作时有一个需求，我做的是PC端的页面，技术栈是Vue+iView做的后台，使用iView渲染表格，当用户点击表格中按钮时，弹出Model框，Model框中会有个表格，表格可以排序，当点击排序按钮时，请求接口并将数据重新渲染。

当我把这些需求都满足时，测试发来一个问题，就是当点击过表格的排序按钮后，然后关闭Model框，随后在点击按钮弹出Model框，此时就会发现，Model框中数据是没有排序的数据，而Model框中表格的排序按钮却是高亮的。

注：我这里是问题解决完后截的图哈，就是排序并没有排序但是表格显示高亮效果。

解决思路：因为表格标题内容是通过对象的形式渲染的，那么就可以在主页表格按钮的点击事件，找到该行的标题数据，先遍历表格的标题字段，通过key作为判断条件，再在该行插入一条对应行的字段，在将之前的标题字段删除

this.bdModal.table.header.map((item,index) => {  // bdModal.table.header为表格标题数据
if(item.key == 'callCount'){ // 判断条件为排序行的key
  this.bdModal.table.header.splice(index,0,  // 通过splice在该index行插入，不删除内容，插入原有字段
    {title: '拨打次数', minWidth: 150, align: 'center', sortable: 'custom',key: 'callCount',sortType: 'desc'},
  )
  this.bdModal.table.header.splice(index,1)  // 插入完成后，再通过splice找到index行，将从index开始数的第一个开始删除，则删除的就是之前的字段
}

splice方法： 第一个参数为找到该位置 Number类型 第二个参数是选定已有内容 Number类型 第三个参数是替换或插入的内容 All

map方法：遍历数组，与for循环，forEach方法相同。