解决vxe-table虚拟滚动造成输入滚动错乱问题

原创已于 2025-07-11 10:45:58 修改 · 445 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

Ftally

关注

标签

#前端 #linux #javascript

分类前端开发

于 2025-07-11 10:19:28 首次发布

1.在scopedSlots方法里增加监听

            customInput: ({ row, _rowIndex, column }) => {
              // 假设 column.inputType 指定输入类型
              if (column.inputType === 'number') {
                return createElement('a-input-number', {
                  key: row[this.rowKey] + '-' + column.field,
                  props: {
                    value: row[column.field],
                    min: 0,
                  },
                  on: {
                    input: (val) => {
                      row[column.field] = val;
                    },
                    change: (val) => {
                      row[column.field] = val;
                    },
                  },
                });
              } else {
                return createElement('a-input', {
                  key: row[this.rowKey] + '-' + column.field,
                  props: {
                    value: row[column.field],
                  },
                  on: {
                    input: (e) => {
                      row[column.field] = e.target.value;
                    },
                  },
                });
              }
            },

2.调用页面如果有输入框，一般这两种输入格式，都需要绑定唯一标识key做深度监听，如果用input-number需要在传进列表的columns，加一个参数进行区分对应上面的column.inputType 入下图所示：inputType: 'number',

   <a-input-number v-model="row.receiveQuantity" :key="_rowIndex + '-' + row.receiveQuantity"/>

   <a-input v-model="row.receiveQuantity" :key="_rowIndex + '-' + row.receiveQuantity"/>