文档
文档中没写数据格式是什么样的,上面的代码是这个我的项目示例的默认数据
<script>const rows10 = { len: 1000 }for (let i = 0; i < 1000; i += 1) { rows10[i] = { cells: { 0: { text: 'A-' + i }, 1: { text: 'B-' + i }, 2: { text: 'C-' + i }, 3: { text: 'D-' + i }, 4: { text: 'E-' + i }, 5: { text: 'F-' + i }, }, }}const rows = { len: 80, 1: { cells: { 0: { text: 'testingtesttestetst' }, 2: { text: 'testing' }, }, }, 2: { cells: { 0: { text: 'render', style: 0 }, 1: { text: 'Hello' }, 2: { text: 'haha', merge: [1, 1] }, }, }, 8: { cells: { 8: { text: 'border test', style: 0 }, }, },}const data = [{ freeze: 'B3', styles: [ { bgcolor: '#f4f5f8', textwrap: true, color: '#900b09', border: { top: ['thin', '#0366d6'], bottom: ['thin', '#0366d6'], right: ['thin', '#0366d6'], left: ['thin', '#0366d6'], }, }, ], merges: ['C3:D4'], cols: { len: 10, 2: { width: 200 }, }, name: '123', rows,},{ name: 'sheet-test', rows: rows10 },]
到这一步,根本的数据曾经配置实现了。在应用的过程中须要更改整个背景色,网格线色彩等款式文档配置中并不反对这些配置。
在github把源码下载下来
更改src\component\table.js 大略在文件第十行左右退出如下代码
//左上角背景色const leftTopBG = '#FF3B3B'//索引行,列const headerBG = '#102E4A'const headerColor = '#FF3B3B'const headerLineColor = '#EED33E'//网格线色彩const gridLineColor = '#00D1FF'// gobal varconst cellPaddingWidth = 5//索引行 列 背景色彩const tableFixedHeaderCleanStyle = { fillStyle: headerBG }//网格线const tableGridStyle = { fillStyle: '#EED33E', lineWidth: thinLineWidth, strokeStyle: gridLineColor,}function tableFixedHeaderStyle() { return { textAlign: 'center', textBaseline: 'middle', font: `500 ${npx(12)}px Source Sans Pro`, fillStyle: headerColor, lineWidth: thinLineWidth(), strokeStyle: headerLineColor, }}
更改renderFixedLeftTopCell 函数
npm i
npm build
应用打包后的js文件