antd-table自动定位、高亮目标行或列

✅正确打开列表花样玩法

项目要求

　　1. 表格高亮目标行

　　2. 表格目标行不在可视范围，自动定位到表格中间。

　　3. 前端搜索定位，搜索列表匹配数据，高亮然后定位

　　4. 多列排序，高亮当前排序列

技术栈

　　vue + antd-vue

思路

　　1. 高亮列表，自定义列表行的className，然后设置样式。使用table的rowClassName。

　　2. 自动定位列表数据，列表数据渲染完后获取table距离页面顶部的距离、高亮行距离页面顶部距离、table的可视高度，用高亮行top - table的top - table的高度 / 2（除以2是为了将高亮行显示在table的中间，不减显示在第一行）。

　　3. 输入关键字搜索，因为要高亮行，所以得重新渲染列表。首先遍历数据，匹配关键字数据设置标志位，高亮思路同上。

　　4. 高亮当前排序列：其实也就是自定义渲染数据样式，tableChange的时候获取到当前被排序的column的dataIndex，存入全局。然后在渲染数据时判断是否为排序行数据，给其样式。

代码实现

　　1. 渲染列表动态设置rowClassName

ra-table.mgt-16(
    rowKey="cityCode"
    :data-source="data" 
    :scroll="{y: scrollAreaHeight}" 
    :rowClassName="setRowClass"
     @change="tableChange")

// 设置当前城市高亮类 record为当前行数据
    setRowClass(record) {
    if (record.cityCode === this.cityCode)  return  'rowhighlight'
}  


// .css
    .rowhighlight {
        background: #F0F7FF;
    }

　　2. 自动定位列表，scrollBy(x, y)表示相对现在的位置横向移动x，纵向移动y。也可以像我设置滚动的行为，我们希望它能平滑滚动，有一个过渡的效果，还可以设置滚动的时长。

// 定位高亮列
    setTableScroll() {
            this.$nextTick(() => {
                const tableEle = document.querySelector('.ant-table-body')
                const highlightRowEle = document.querySelector('.rowhighlight')
                const tableEleTop = tableEle && tableEle.getBoundingClientRect().top
                const tableEleClientHeight = tableEle && tableEle.getBoundingClientRect().height
                const highlightRowEleTop = highlightRowEle && highlightRowEle.getBoundingClientRect().top 
                const scroll = highlightRowEleTop - tableEleTop - tableEleClientHeight / 2
                tableEle.scrollBy({ top: scroll, behavior: 'smooth' })
            })
        },

　　3. 搜索列表数据匹配高亮，实现方式同上，这里不再赘述。

　　4. 高亮当前排序列，样式根据业务自行替换

a-table.mgt-16(
    rowKey="cityCode"
    :data-source="data" 
    :scroll="{y: scrollAreaHeight}" 
    :rowClassName="setRowClass"
    @change="tableChange")
        a-table-column(
            v-for="column in columns"
            :title="column.title"
            align="center"
            :sorter="column.sorter"
            :defaultSortOrder="column.defaultSortOrder"
            :key="column.dataIndex")
            template(slot-scope="text, record")
                div(
                    :style="getItemClass(record, column)" 
                    :title="record[column.dataIndex]") {{record[column.dataIndex]}}     

// fcvToColor 是根据当前值获取的颜色，可忽略
getItemClass(record, column) {
　　// 判断当前行是否为排序行
　　if (!column.sorter || column.dataIndex !== this.currentSorterKey) return
　　const color = fcvToColor(record[column.dataIndex], column.key, 0)
　　return {
　　　　width: '40px',
　　　　height: '22px',
　　　　color: '#FFFFFF',
　　　　background: color,
　　　　borderRadius: '11px',
　　　　margin: '0 auto',
　　}
},

           

 效果预览