vue-canvas-table
使用Canvas实现的表格组件,数据量大的情况下与使用标签实现的表格控件相比速度会更快
安装
npm i vue-canvas-table -S
使用
......
示例
npm installnpm run dev
选项
source: // 数据源columns: '暂无数据'datas:width: 0 // canvas宽度height: 0 // canvas高度cellMaxWidth: 0 // 最大单元格宽度,默认屏幕1/3paddingLR: 22 // 左右内间距paddingTB: 22 // 上下内间距lineHeight: 8 // 多行文字行高fontSize: 16 // 字体大小fontColor: '#333333' // 字体颜色fontFamily: 'Microsoft YaHei' // 字体sliderColor: 'rgba(0, 0, 0,.3)' // 滑块颜色lineColor: '#ededed' // 表格分割线颜色lockRows: 1 // 锁定1行lockColumns: 1 // 锁定1列{ // 把source转换成二维数组let arr =arrsourcedatasreturn arr}{ // 行列索引转换成与source对应的数据if row === 0returnrowcolrowData: thissourcecolumnscolData: thissourcecolumnscolelsereturnrowcolrowData: thissourcedatasrow - 1colData: thissourcedatasrow - 1columnscol}{ // 设置单元格参数if row === 0returncolor: '#F8F8F8'elseif datarowDataclickAble === falsereturncolor: '#F8F8F8'elsereturnarrow: truecolor: '#FFFFFF'}