zoukankan      html  css  js  c++  java
  • 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 {
         '40px',
        height: '22px',
        color: '#FFFFFF',
        background: color,
        borderRadius: '11px',
        margin: '0 auto',
      }
    },
    
               

     效果预览

  • 相关阅读:
    20145225 实验四《Andoid开发基础》
    20145235 《Java程序设计》第9周学习总结
    20145235实验三队友(20145225)
    20145235 《Java程序设计》第8周学习总结
    20145235《Java程序设计》第7周学习总结
    20145235 《Java程序设计》实验二
    20145235 《Java程序设计》第一次实验报告
    20145235 《Java程序设计》第6周学习总结
    20145232韩文浩《网络对抗》PC平台逆向破解
    20145232韩文浩《网络对抗》 恶意代码分析
  • 原文地址:https://www.cnblogs.com/zhoujin-Jojo/p/13755531.html
Copyright © 2011-2022 走看看