Commit ecd603e2 authored by yanglilong's avatar yanglilong

Merge branch 'yll-fix' into 'master'

fix(custom): 修改回款管理账单列表虚拟滚动

See merge request !87
parents 4b18951c 092fad97
This diff is collapsed.
This diff is collapsed.
### 表格虚拟滚动
#### api文档
1. 属性说明
参数 说明 类型 可选值 默认值
dataSource 总数据 Array 必填
keyProp key值,data数据中的唯一id【⚠️若keyProp未设置或keyProp值不唯一,可能导致表格空数据或者滚动时渲染的数据断层、不连贯】 string — id
itemSize 每一行的预估高度 number — 60
scrollBox 指定滚动容器;在指定滚动容器时,如果表格设置了height高度,则滚动容器为表格内的滚动容器;如果表格为设置height高度,则自动获取父层以外的滚动容器,直至window容器为止 string — -
buffer 顶部和底部缓冲区域,值越大显示表格的行数越多 Number — 200
throttleTime 滚动事件的节流时间 number — 10
dynamic 动态获取表格行高度,默认开启。设置为false时,则以itemSize为表格行的真实高度,能大大减少虚拟滚动计算量,减少滚动白屏;如果itemSize与表格行的真实高度不一致,可能导致滚动时表格数据错乱 boolean — true
virtualized 是否开启虚拟滚动 boolean — true
* 支持 <a-table> 组件的props属性,更多请看 <a-table> api - — -
2. 方法说明
方法名 说明 参数
scrollTo 滚动到第几行【不太精确:因为滚动到第n行时,如果周围的表格行计算出真实高度后会更新高度,导致当前行坍塌或撑起】 index
update 更新 -
clearSelection 用于多选 <virtual-column type="selection">,清空用户的选择 -
toggleRowSelection 用于多选 <virtual-column type="selection">, 切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) row, selected
3. 事件说明
事件名称 说明 参数
change 计算完成真实显示的表格行数 (renderData, start, end):renderData 真实渲染的数据,start和end指的是渲染的数据在总数据的开始到结束的区间范围
selection-change 虚拟表格多选选项发生更改时触发事件 selectedRows
const path = require("path"); const path = require('path')
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const CompressionPlugin = require("compression-webpack-plugin"); // 代码压缩 const CompressionPlugin = require('compression-webpack-plugin') // 代码压缩
const defaultSettings = require("./src/settings.js"); const defaultSettings = require('./src/settings.js')
module.exports = { module.exports = {
publicPath: "/bims", publicPath: '/bims',
productionSourceMap: false, productionSourceMap: false,
pluginOptions: { pluginOptions: {
"style-resources-loader": { 'style-resources-loader': {
preProcessor: "less", preProcessor: 'less',
patterns: [path.resolve(__dirname, "src/assets/style/common.less")], patterns: [path.resolve(__dirname, 'src/assets/style/common.less')]
}, }
}, },
css: { css: {
loaderOptions: { loaderOptions: {
less: { less: {
javascriptEnabled: true, javascriptEnabled: true
}, }
} }
}, },
chainWebpack: (config) => { chainWebpack: (config) => {
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === 'production') {
// lodash 按需加载 // lodash 按需加载
config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin()); config.plugin('loadshReplace').use(new LodashModuleReplacementPlugin())
} }
}, },
configureWebpack: (config) => { configureWebpack: (config) => {
config.name = defaultSettings.title; config.name = defaultSettings.title
const plugins = []; const plugins = []
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === 'production') {
plugins.push( plugins.push(
new CompressionPlugin({ new CompressionPlugin({
filename: "[path][base].gz", filename: '[path][base].gz',
algorithm: "gzip", algorithm: 'gzip',
test: new RegExp(".(" + ["js", "css", "json"].join("|") + ")$"), test: new RegExp('.(' + ['js', 'css', 'json'].join('|') + ')$'),
threshold: 8192, threshold: 8192,
include: /\/src/, include: /\/src/,
exclude: /node_modules/, exclude: /node_modules/,
minRatio: 0.8, minRatio: 0.8,
deleteOriginalAssets: false, // 此处源文件保留吧,以防不测 deleteOriginalAssets: false // 此处源文件保留吧,以防不测
}) })
); )
} }
config.plugins = [...config.plugins, ...plugins]; config.plugins = [...config.plugins, ...plugins]
}, },
devServer: { devServer: {
...@@ -51,14 +51,15 @@ module.exports = { ...@@ -51,14 +51,15 @@ module.exports = {
port: 8888, port: 8888,
hot: true, hot: true,
proxy: { proxy: {
"^/api_bims": { '^/api_bims': {
target: "http://47.99.75.3:8070", target: 'http://47.99.75.3:8070', // 测试
// target: 'http://bims.medilink-global.com.cn/api_bims', // 生产
pathRewrite: { pathRewrite: {
"^/api_bims": "/", '^/api_bims': '/'
}, },
changeOrigin: true, changeOrigin: true,
secure: false, secure: false
}, }
}, }
}, }
}; }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment