Giter VIP home page Giter VIP logo

el-table-virtual-scroll's Introduction

el-table-virtual-scroll

基于Element-UI的Table 组件开发的虚拟滚动组件,支持动态高度,解决数据量大时滚动卡顿的问题。

⚠️仅支持vue2。

demo & 源码:https://xiaocheng555.github.io/el-table-virtual-scroll/

安装

$ npm i el-table-virtual-scroll -S

用法

<virtual-scroll
  :data="list"
  :item-size="62"
  key-prop="id"
  @change="(renderData) => virtualList = renderData">
  <el-table 
    row-key="id" 
    :data="virtualList" 
    height="500px">
  </el-table>
</virtual-scroll>
...

import VirtualScroll from 'el-table-virtual-scroll'

export default {
  component: {
    VirtualScroll
  },
  data () {
    list: [
      {
        id: 1,
        text: 'content'
      },
      // ...... 省略n条
      {
        id: 2000,
        text: 'content2'
      }
    ],
    virtualList: []
  }
}

el-table-virtual-scroll 组件

Props

参数 说明 类型 可选值 默认值
data 总数据 Array 必填
keyProp key值,data数据中的唯一id【⚠️若keyProp未设置或keyProp值不唯一,可能导致表格空数据或者滚动时渲染的数据断层、不连贯、滚动不了】 string id
itemSize 每一行的预估高度 number 60
scrollBox 指定滚动容器;在指定滚动容器时,如果表格设置了height高度,则滚动容器为表格内的滚动容器;如果表格未设置height高度,则自动获取外层的滚动容器,直至window容器为止 string 'window'、css选择器 -
buffer 顶部和底部缓冲区域,值越大显示表格的行数越多 Number 200
throttleTime 滚动事件的节流时间 number 16
dynamic 动态获取表格行高度,默认开启。设置为false时,则以itemSize为表格行的真实高度,能大大减少虚拟滚动计算量,减少滚动白屏;如果itemSize与表格行的真实高度不一致,可能导致滚动时表格数据错乱、抖动、底部有空白 boolean true
virtualized 是否开启虚拟滚动(>=1.0.3版本支持) boolean true
rowSpanKey 当使用了el-table的合并行,必须设置rowSpanKey函数并返回每组合并行**用的key值(>=1.0.13版本支持) Function(row, index) -
selectionSort 支持多选可自定义选中数据的排序规则,默认为 true 按选择顺序排,传入 false 为按列表中的顺序排,传入函数为自定义排序规则 (>=1.0.27版本支持) Boolean、Function -
getElTable 获取 <el-table> 组件,默认获取 <virtual-scroll> 的第一个子组件;如果 <el-table> 组件经过用户封装,那么需要使用该方法返回正确的 <el-table> 组件【可通过 ref、$children 返回正确的值】(>=1.0.29版本支持) Function -
keepScroll 当使用v-show,keep-alive 切换表格显示时,会保持原来滚动位置(>=1.1.1版本支持) boolean true

Methods

方法名 说明 参数
scrollTo 滚动到第几行;index - 行数索引值;offset - 偏移位置(>=1.0.25版本支持) (index: number, offset: number)
update 更新,会重新计算实际渲染数据和位置 -
clearSelection 用于多选 <virtual-column type="selection">,清空用户的选择 -
toggleRowSelection 用于多选 <virtual-column type="selection">, 切换表格行的选中状态,如果使用了第二个参数,则是设置表格行选中与否(selected 为 true 则选中);如果需要切换多行选中状态,请传入数组,避免造成卡顿 row
toggleRowExpansion 用于展开行 <virtual-column type="expand">, 切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) row, expanded
setCurrentRow 用于单选 <virtual-column type="radio">, 设定某一行为选中行 row
slowOnMousewheel 减缓滚轮滚动的速度,slowNum参数为减缓参数,默认为1,数值越大滚动越慢;在mac电脑上,谷歌、火狐浏览器在 自定义固定列 demo 上快速滚动会有白屏,可以使用该方法减少白屏。请根据实际情况使用,使用不当可能会让表格滚动卡顿。【注意:滚轮滚动有效,拖动滚动条滚动无效】(>=1.0.28版本支持) slowNum

Events

事件名称 说明 参数
change 计算完成真实显示的表格行数 (renderData, start, end):renderData 真实渲染的数据,start和end指的是渲染的数据在总数据的开始到结束的区间范围
current-change 虚拟表格单选选中事件 currentRow
selection-change 虚拟表格多选选项发生更改时触发事件 selectedRows
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row, checked
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection, checked

virtual-column 组件

使用 <el-table-virtual-scroll> 做表格虚拟滚动,是不支持 ElementUI 表格的原有的索引、多选、扩展行等功能,需要使用 <virtual-column> 来兼容。<virtual-column> 组件内封装了 <el-table-column>,支持传入 <el-table-column> 组件的props属性。 其中 <virtual-column> 会在表格row数据上扩展 $v_checked$v_expanded ... 等属性,请悉知。

更多demo & 源码查看:https://xiaocheng555.github.io/el-table-virtual-scroll/

引入

import { VirtualColumn } from 'el-table-virtual-scroll'

...

<virtual-column type="index/selection/radio/expand/tree"></virtual-column>

Props

参数 说明 类型 可选值 默认值
* 支持 <el-table-column> 组件的props属性,如label, fixed, prop, width, min-width, index 等等 - -
type type="index" 为索引;type="selection" 为多选;type="radio" 为单选;type="expand" 为扩展行;type="tree" 为模拟树结构 String 选填
indent 展示树形数据时,树节点的缩进,type 为 tree 时生效 Number 16
load 加载子节点数据的函数,type 为 tree 时生效 Function(row, resolve) -
tree-props 渲染嵌套数据的配置选项,type 为 tree 时生效(>=1.2.0版本支持) Object 例如:{ hasChildren: 'hasChildren', children: 'children' }: 当 hasChildren 为true时,显示 children 为子节点,当 hasChildren 为false时,没有子节点,当 hasChildren 为 null/undefined 时,触发load函数加载子节点 -
vfixed 固定列(>=1.0.16版本支持)。使用 position: sticky; 来实现固定列,不会生成额外table,滚动更丝滑;使用时,需要设置table的headerCellStyle、cellStyle(注意组件必须按固定列顺序排列最左或最右),参考demo String/Boolean left/right/true -

Methods

方法名 说明 参数
expand 【仅type="tree" 模拟树结构】展开行,其中 expandKeys 为展开行的 keys 数组;expanded 为展开或收起,默认为true;doLoad 为当展开时,是否展开新的行(调用load方法),默认为true(>=1.0.25版本支持) Function(expandKeys, expanded, doLoad)
expandPath 【仅type="tree" 模拟树结构】展开目标路径,keyPath为路径数组,如['key1', 'key2', 'key3'],该方法会展开 key1 -> key2 -> key3 对应的树节点(>=1.0.25版本支持) keyPath: Array
expandAll 【仅type="tree" 模拟树结构】展开所有行(>=1.0.25版本支持) -
unexpandAll 【仅type="tree" 模拟树结构】收起所有行(>=1.0.25版本支持) -
removeNode 【仅type="tree" 模拟树结构】删除节点,所有子节点也会删除; onlyChild为true时,只删除子节点(>=1.1.14版本支持) (row, onlyChild = false)
reloadNode 【仅type="tree" 模拟树结构】重新加载节点(删除所有子节点,并触发load函数重新加载)(>=1.1.14版本支持) row
getChildNodes 【仅type="tree" 模拟树结构】获取所有子孙节点(>=1.1.14版本支持) row
getParentNodes 【仅type="tree" 模拟树结构】获取所有父节点(>=1.1.14版本支持) row
getAllNodes 【仅type="tree" 模拟树结构】获取所有节点,包含隐藏的节点(>=1.1.14版本支持) -

el-table-virtual-scroll 组件注意事项

  • 使用组件前,请确保项目中有引入 element-ui 组件库。

  • <el-table> 组件最好写上 row-key 属性,能避免一些奇怪的问题。例:<el-table row-key="id">,其中id为数据中唯一key值。

  • 不支持 Element-UI Table 原有多选、扩展行、索引,请使用 <virtual-column> 做兼容,详见demo。

  • Element-UI Table 单选高亮,版本>=1.0.26支持

  • Element-UI Table 多选高亮,版本>=1.3.1支持

  • 支持 Element-UI Table 排序和筛选,版本>=1.3.1支持

  • 支持 Element-UI Table 多选的 reserve-selection,版本>=1.3.1支持

更新内容

2022-11-15

  • Prop height 废弃,改为使用 item-size,更具语义

  • Prop 增加 scrollBox,可以指定滚动容器

  • 修复data为空时,表格仍然撑起高度

  • 增加多个场景下的demo

2022-12-14

  • 支持树结构虚拟滚动

  • 增加模拟树结构懒加载demo

2022-12-30

  • 完善demo和api

  • npm 发包

2023-1-9

  • 增加virtualized prop 来控制是否开启虚拟滚动

  • npm 1.0.3 版本发包

2023-1-11

  • 修复表格多选 selection-change 事件中返回的数据没有按顺序排序

  • npm 1.0.5 版本发包

2023-1-12

  • 用到的element-ui组件局部引入,无需安装loadsh

  • npm 1.0.6 版本发包

2023-1-13

  • 修复element-ui组件局部引入方式不正确

  • npm 1.0.7 版本发包

2023-1-13

  • 修复滚动容器设置为window时报错

  • 修复指定滚动容器,特殊情况滚动时表头会一直在

  • npm 1.0.8 版本发包

2023-2-22

  • 修复 <virtual-column> 组件在低版本 vue-template-compiler 时会显示 undefined

  • npm 1.0.9 版本发包

2023-2-27

  • 修复分页时全选框没有重置状态

  • npm 1.0.10 版本发包

2023-3-2

  • 修复浏览器外链引入时,全局 ElemnetUI 引入错误

  • npm 1.0.11 版本发包

2023-4-3

  • 修复pageckage.json中module文件引入不正确

  • npm 1.0.12 版本发包

2023-4-12

  • 增加rowSpanKey 属性兼容表格合并行;增加相关demo

  • npm 1.0.13 版本发包

2023-5-9

  • 修复 <el-table> 组件设置 max-height 属性,虚拟滚动有问题;增加表尾合计行demo

  • npm 1.0.14 版本发包

2023-7-26

  • <virtual-column> 组件增加 vfixed: left/right 来设置固定列,滚动更丝滑

  • npm 1.0.15 版本发包

2023-7-27

  • 修复自定义固定列bug

  • npm 1.0.16 版本发包

2023-8-10

  • virtual-column 支持selectable

  • 修复 v-show 切换表格会卡顿

  • npm 1.0.17 版本发包

2023-8-10

  • 修复 v-show 切换表格会卡顿

  • npm 1.0.18 版本发包

2023-8-11

  • 修复自定义固定列表格不存在滚动条时,表头偏移

  • npm 1.0.19 版本发包

2023-8-21

  • 修复 v-show 切换表格引起的bug

  • 增加 disabled prop 禁止虚拟计算(v-show=false时可设置)

  • npm 1.0.20 版本发包

2023-11-14

  • <virtual-column> 支持嵌套

  • npm 1.0.21 版本发包

2023-11-23

  • <virtual-column> 支持 formatter 属性

  • npm 1.0.22 版本发包

2023-11-28

  • 修复固定列 fixed 动态切换时,固定列位置可能会错乱

  • npm 1.0.23 版本发包

2023-11-28

  • 修复树结构懒加载 如果有hasChildren=false的行 行可视区域高度异常

  • npm 1.0.24 版本发包

2023-11-29

  • 模拟树结构表格增加一系列展开方法和demo

  • <virtual-column> 列嵌套修改

  • scrollTo 方法 支持传入偏移量

  • npm 1.0.25 版本发包

2023-11-30

  • 兼容行高亮(单选)

  • npm 1.0.26 版本发包

2023-11-31

  • 支持 currentRowKey

2023-12-4

  • 增加多选项可选择排序方式;

  • 修复删除多选项时没有触发selection-change事件

  • npm 1.0.27 版本发包

2023-12-6

  • 增加 slowOnMousewheel 方法

  • npm 1.0.28 版本发包

2023-12-11

  • 增加 getElTable 属性

  • npm 1.0.29 版本发包

2023-12-11

  • 修复自定义表格树刷新数据后,子节点无法展开

  • npm 1.0.30 版本发包

2023-12-19

  • 修复表格多选时,刷新列表后选中项还在

  • npm 1.0.31 版本发包

2023-12-25

  • 修复 el-table-virtual-column 中未阻止事件冒泡

  • npm 1.0.32 版本发包

2024-1-10

  • keep-alive 保持滚动位置

  • npm 1.1.0 版本发包

2024-1-11

  • keep-alive 保持滚动位置(优化)

  • npm 1.1.1 版本发包

2024-1-12

  • 兼容设置 virtualized=false,keep-alive 保持滚动位置

  • npm 1.1.2 版本发包

2024-1-19

  • 修复通过 babel-plugin-component 按需引入 element-ui 时,会导致 <virtual-column> 组件报重复key

  • npm 1.1.3 版本发包

2024-1-25

  • 修复表格隐藏时向列表头部插入表格数据,显示时不能保持滚动条位置

  • 修复自定义固定列如果没有横向滚动条时,仍然显示固定样式

  • npm 1.1.4 版本发包

2024-1-25

  • 如果全局没有引入 ElTableColumn,VirtualColumn 按需引入 ElTableColumn 组件

  • npm 1.1.5 版本发包

2024-3-1

  • formatter参数支持VNode作为返回值(适配jsx写法)

  • 修复二次封装的el-table时,cellFixedStyle 获取eltable报错

  • npm 1.1.6 版本发包

2024-3-5

  • 优化virtual-column组件的formatter实现,避免低版本浏览器调用两次formatter

  • npm 1.1.7 版本发包

2024-3-5

  • toggleRowSelection 支持传入数组,避免多次调用toggleRowSelection造成卡顿

  • npm 1.1.8 版本发包

2024-4-8

  • 支持 select, select-all 事件

  • npm 1.1.9 版本发包

2024-4-11

  • 修复resize后自定义固定样式错乱;列拖拽偶尔会有白边

  • 修复isVNode在生产判断有误

  • npm 1.1.10 版本发包

2024-4-12

  • 优化虚拟滚动结束位置计算

  • 修复列拖拽跨度太多,表格有部分白屏或者行高度错乱

  • npm 1.1.11 版本发包

2024-4-23

  • 兼容旧版 element-ui table 组件没有 syncPostion 方法

  • npm 1.1.12 版本发包

2024-5-15

  • 树形表格提供方法:删除节点、重新加载节点、获取子节点、获取父节点、获取所有节点 (removeNode/reloadNode/getChildNodes/getParentNodes/getAllNodes)

  • npm 1.1.13 版本发包

2024-5-16

  • 修复树形表格提供方法:删除节点、重新加载节点、获取子节点、获取父节点、获取所有节点 (removeNode/reloadNode/getChildNodes/getParentNodes/getAllNodes)

  • npm 1.1.14 版本发包

2024-5-16

  • VirtualColumn 组件 增加 tree-props 属性设置

  • npm 1.2.0 版本发包

2024-6-5

  • 支持 el-table 的过滤和筛选功能,调整部分代码(代码改动较多)

  • 多选支持 reserve-selection

  • npm 1.3.0 版本发包

2024-6-6

  • 兼容 selectOnIndeterminate、highlightSelectionRow、default-sort、filtered-value、clearFilter、clearSort

  • 修复全选 bug

  • npm 1.3.1 版本发包

el-table-virtual-scroll's People

Contributors

1054959069 avatar george-hong avatar xiaocheng555 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

el-table-virtual-scroll's Issues

项目打包报错

win10,vue2.6,webpack2.6,nodeV14
在安装启动以及热部署的时候都没有问题,但是在npm run build打包之后,会产生一个报错
"el-table-virtual-scroll": "^1.0.20",

ERROR in static/js/0.752c5439a0eef37cc905.js from UglifyJs
Unexpected token: name (hook) [./~/el-table-virtual-scroll/dist/el-table-virtual-scroll.esm.js:1422,0][static/js/0.752c5439a0eef37cc905.js:6900,8]

123

el-table开启固定列后滚动会卡顿很严重

<virtualScroll
      :data="tableData"
      :itemSize="45"
      keyProp="colGuid"
      @change="data => (renderData = data)"
      @selection-change="selectRows"
    >
      <el-table
        row-key="colGuid"
        :data="renderData"
        :height="tableHeight"
        ref="multipleTable"
        border
        size="small"
        :stripe="isStripe"
        :header-cell-style="headerStyle"
        :cell-style="{ textAlign: 'center' }"
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="aic-icon-loading"
      >
        <virtual-column width="55" type="selection"></virtual-column>
        <virtual-column label="序号" align="center" width="80" type="index"></virtual-column>
        <el-table-column prop="itemName" label="名称" min-width="100"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="100"> </el-table-column>
        <el-table-column prop="sortNo" label="排序" min-width="100"> </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.status === 1"
              type="primary"
              size="mini"
              icon="el-icon-edit"
              title="详情"
              @click="onDetail(scope)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </virtualScroll>

优化

虚拟表格的keyProp 唯一值能否支持多列,有需求是多列来确定唯一值

表格中嵌入了表单,如果触发了必填校验,input框边框变红(error态),滚动的时候这行错误状态不会随滚动条往上滚动,而是一直留在可视窗口中

<el-table-column
    prop="cost"
    label="金额"
    :min-width="140"
  >
    <template slot-scope="scope">
      <el-form-item
        :prop="
          `${detailListName}[${scope.$index + vIndex}].${scope.column.property}`
        "
      >
        <el-input-number
          v-model="scope.row.cost"
          placeholder="请输入"
          :style="{ width: '100%' }"
          controls-position="right"
          :min="0"
          :max="100"
          :precision="2"
        >
        </el-input-number>
      </el-form-item>
    </template>
  </el-table-column>

virtual-column不支持多表头

想所有列都用virtual-column替代el-table-column,
但目前嵌套virtual-column行为有问题。

el-table-column默认插槽 和 default 的作用域插槽 行为不一样。
el-table-column用作用域插槽嵌套不能实现多表头。
virtual-column只提供了default作用域插槽。

支持vue3

有没有考虑支持vue3,如果想在vue3 + elementPlus 中使用是不是只能手动复制代码然后修改呢

virtual-column type="expand" 内部请求接口数据再展示时,滚动条无法正常工作

错误描述:
点击【商品名称】该列下的内容,手动触发展开,再点击收起后,滚动条无法继续拖动。T_T

具体demo:
https://codesandbox.io/s/nifty-wright-8chhnf?file=/src/App.vue

具体代码:

<template>
  <div>
    <virtual-scroll
      ref="virtualScroll"
      :data="list"
      :item-size="62"
      key-prop="id"
      @change="onVirtualChange"
    >
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        height="600"
        row-key="id"
        style="width: 100%"
      >
        <virtual-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children">
              <el-table-column
                align="center"
                prop="name"
                label="专业代码"
              ></el-table-column>
            </el-table>
          </template>
        </virtual-column>
        <el-table-column label="商品 ID" width="70" prop="id"></el-table-column>
        <el-table-column label="商品名称" prop="name">
          <template slot-scope="props">
            <span @click="toggleExpand(props.row)" style="cursor: pointer">
              {{ props.row.name }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </virtual-scroll>
  </div>
</template>

<script>
import VirtualScroll from "el-table-virtual-scroll";
import { VirtualColumn } from "el-table-virtual-scroll";

export default {
  components: {
    VirtualScroll,
    VirtualColumn,
  },
  data() {
    return {
      list: [],
      tableData: [],
      loading: false,
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.list = [];
      setTimeout(() => {
        this.list = [];
        for (let i = 1; i < 2000; i++) {
          const text = this.getRandomContent();
          const text2 = this.getRandomContent();
          this.list.push({
            id: i + 1,
            name: "商品名称,点我展开" + i,
            show: false,
            text,
            text2,
          });
        }
        this.loading = false;
      }, 1000);
    },
    getRandomContent() {
      const content = [
        "这是一条测试数据",
        "君不见黄河之水天上来,奔流到海不复回。",
        "十年生死两茫茫",
        "寻寻觅觅,冷冷清清,凄凄惨惨戚戚。",
        "桃花坞里桃花庵,桃花庵里桃花仙;桃花仙人种桃树,又摘桃花卖酒钱。",
        "明月几时有,把酒问青天。",
        "槛菊愁烟兰泣露,罗幕轻寒,",
        "寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处,兰舟催发。执手相看泪眼,竟无语凝噎。念去去,千里烟波,暮霭沉沉楚天阔。多情自古伤离别,更那堪冷落清秋节!今宵酒醒何处?杨柳岸,晓风残月。此去经年,应是良辰好景虚设。便纵有千种风情,更与何人说?",
        "红豆生南国,春来发几枝。",
        "黄鹂",
      ];
      const i = Math.floor(Math.random() * 10);
      return content[i];
    },
    async onVirtualChange(virtualList) {
      this.tableData = virtualList;
    },
    toggleExpand(row) {
      if (!row.$v_expanded) {
        setTimeout(() => {
          let tableDataIndex = this.tableData.findIndex(
            (item) => item.id === row.id
          );
          console.log("tableDataIndex", tableDataIndex);
          this.$set(this.tableData[tableDataIndex], "children", [
            { id: Math.random() + row.id + 2111, name: "商品名称" },
            { id: Math.random() + row.id + 2112, name: "商品名称" },
            { id: Math.random() + row.id + 2113, name: "商品名称" },
            { id: Math.random() + row.id + 2114, name: "商品名称" },
            { id: Math.random() + row.id + 2115, name: "商品名称" },
            { id: Math.random() + row.id + 2116, name: "商品名称" },
            { id: Math.random() + row.id + 2117, name: "商品名称" },
            { id: Math.random() + row.id + 2118, name: "商品名称" },
            { id: Math.random() + row.id + 2119, name: "商品名称" },
            { id: Math.random() + row.id + 2120, name: "商品名称" },
            { id: Math.random() + row.id + 2121, name: "商品名称" },
            { id: Math.random() + row.id + 2122, name: "商品名称" },
            { id: Math.random() + row.id + 2123, name: "商品名称" },
          ]);
          this.$refs.virtualScroll.toggleRowExpansion(row);
          this.$refs.virtualScroll.update();
        }, 1500);
      } else {
        this.$refs.virtualScroll.toggleRowExpansion(row);
        this.$refs.virtualScroll.update();
      }
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style lang='less' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

虚拟滚动固定列在火狐52 32位版本中失效的问题

小哥你好,最近有个新客户,使用的浏览器版本很低,之前用的el-table,数据量太大,又不想要分页,所以使用了[el-table-virtual-scroll],

但是现在固定列失效了,想问一下有没有什么解决思路呢?

大佬又来麻烦你了

有个需求是这样的,就是一页500条,然后做一个前端搜索的功能,方便用户去勾选,比如搜索第365条符合用户的搜索条件,直接表格滚动到第365行,然后方便他去做选择。。。这种以什么样的一个思路去做呢?

使用vuex作为数据中间件的情况下,出现选中展示的问题

由于vuex修改数据需要通过mutation,所以在绑定数据源的时候我深克隆了数据。
如果这时用户点击了全选按钮,实际被修改了$v_checked属性的是这份克隆数据。
接下来如果用户对数据进行了操作,比如修改了数据的一个属性,就会触发mutation对原始数据进行修改,这时绑定数据源也跟着发生变化,重新克隆了一份。
但是由于原始数据上没有$v_checked字段,所以页面上的checkbox选中状态消失,但是由于没有发生选中变更,所以 @selection-change事件不会被触发。
我现在的处理方式是,在 @selection-change事件中记录下所有数据的id,然后在 @change 事件中依次对数据设置一次$v_checked属性。

排序数据显示不全问题,拉到底部会疯狂抖动

// 排序方法
sortChange(item) {
  const { prop, order } = item
  const percentReg = /^(\d+(\.\d+)?)%$/
  console.log(this.adAccount, 1111)
  if (order === 'ascending') {
    this.adAccount.sort((a, b) => {
      if (percentReg.test(a[prop]) && percentReg.test(b[prop])) {
        return parseFloat(a[prop].replace('%', '')) - parseFloat(b[prop].replace('%', ''))
      } else {
        return a[prop] - b[prop]
      }
    })
  } else {
    this.adAccount.sort((a, b) => {
      if (percentReg.test(a[prop]) && percentReg.test(b[prop])) {
        return parseFloat(b[prop].replace('%', '')) - parseFloat(a[prop].replace('%', ''))
      } else {
        return b[prop] - a[prop]
      }
    })
  }
}
<virtual-scroll
        :data="adAccount"
        :dynamic="false"
        :item-size="60"
        key-prop="id"
        @change="(renderData) => virtualList = renderData"
      >
        <el-table
          ref="table"
          v-loading="loading"
          :data="virtualList"
          row-key="id"
          :row-class-name="tableRowClassName"
          stripe
          border
          height="700"
          @sort-change="sortChange"
        >
          <el-table-column
            v-if="queryParams.dimension.includes('date')"
            prop="date"
            width="150px"
            label="日期"
          />
          <el-table-column
            v-if="queryParams.dimension.includes('ad.adgroup_id')"
            prop="adgroup_name"
            width="150px"
            label="广告组"
          />
          <el-table-column
            v-if="queryParams.dimension.includes('ad.campaign_id')"
            prop="campaign_name"
            width="250px"
            label="广告系列"
          />
          <el-table-column
            v-for="item in listColumns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :fixed="item.fixed"
            :sortable="item.sortable"
          />
        </el-table>
      </virtual-scroll>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.