记录在elementui中常见的问题（已更新el-table）

el-table

1. 样式错乱。element的table组件，如果表格的列是动态渲染的，那么在每一次列的名称和数量改变后，表格的布局可能会出现错乱，这时候调用 官方提供的doLayout方法，对表格进行自动强制重新布局，即可解决样式错乱的问题

<template>
    <el-table id="dataTable" ref="dataTable" >
        ...
    </el-table>
</template>
<script>
    ...
    //在列的属性改变后调用
    this.$refs.dataTable.doLayout()
</script>

2. 后端排序。在的属性中添加sortable属性，设置为custom,然后在表格上添加sort-change事件，在methods中定义回调，并触发接口的查询。

<template>
<el-table  ref="dataTable" :data="tableData" @sort-change="onSortChange">
    <el-table-column sortable="'custom'">
    </el-table-column>
</el-table>
</template>
<script>
    ...
    methods:{
        onSortChange(e){
            console.log(e.column) //当前列的配置
            console.log(e.order)  //当前排序方法,三个值其中之一  "ascending"  "descending"  null
            console.log(e.prop)   //当前列的prop
        }
    }
</script>

3. 清除排序。当我们需要手动清除列表的排序状态时,调用this.$refs.dataTable.clearSort();即可。
4. 横向滚动和纵向滚动。想要让表格纵向滚动，只需要为el-table组件添加height属性，即可实现。想要实现横向滚动，需要为每一列指定width属性，当超出表格的容器宽度后，会自动横向滚动
5. 自动设置某一行高亮。我们需要先拿到这一行完整的数据(根据id或其他标识，从表格的数据源list中取)row。然后调用this.$refs.dataTable.setCurrentRow(row)
6. 控制表格滚动条位置(通常用来清除表格的滚动状态)。拿到table实例，会发现它的实例上挂在了bodyWrapper组件，通过改变bodyWrapper的scrollLeft和scrollTop属性，可以手动控制表格滚动的位置。下面直接上代码

//清空滚动
const divData = this.$refs.dataTable.$refs.bodyWrapper //拿到bodyWrapper组件的实例
divData.scrollLeft = 0 //控制x轴的滚动，0代表靠最左边
divData.scrollTop = 0//控制y轴的滚动，0代表靠最上边

这一方法结合定时器还可以实现el-table的自动滚动，用来实现特定的展示需求。下面是自动滚动的代码

//清空滚动
const divData = this.$refs.dataTable.$refs.bodyWrapper //拿到bodyWrapper组件的实例
setInterval(()=>{
    divData.scrollLeft +=1
},24)//每24毫秒，向右移动一个像素