关于excel:XSpreadsheet-设置默认数据默认样式

42次阅读

共计 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 文件

正文完
 0