共计 1408 个字符,预计需要花费 4 分钟才能阅读完成。
文档
文档中没写数据格式是什么样的,上面的代码是这个我的项目示例的默认数据
<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 var
const 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 文件
正文完