标签：000000 text cells 编译 thin 电子表格 true 0366d6

https://www.cnblogs.com/wqnmlgbsz/p/13065319.html

npm npm install x-data-spreadsheet

<template>
<div id="x-spreadsheet-demo"></div>
</template>
<script>
import Spreadsheet from 'x-data-spreadsheet';
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
export default {
data() {
return {
options:{
mode: 'edit',
showToolbar: true,
showGrid: true,
showContextmenu: true,
view: {
/*宽高，因为我是自定义的所以-----*/
/*height: () => document.documentElement.clientHeight - 300,
width: () => document.documentElement.clientWidth - 300,*/
height: () => document.documentElement.clientHeight - 64,
width: () => document.documentElement.clientWidth - 150,
},
formats: [],
fonts: [],
formula: [],
row: {
len: 100,
height: 25,
},

col: {
len: 26,
width: 100,
indexWidth: 60,
minWidth: 60,
},
/*freeze: 'C3',*/
style: {
bgcolor: '#ffffff',
align: 'left',
valign: 'middle',
textwrap: false,
textDecoration: 'normal',
strikethrough: false,
color: '#0a0a0a',
font: {
name: 'Helvetica',
size: 10,
bold: false,
italic: false,
},
},
},
/*数组*/
optionss:[{
name:'aaaa',
/*freeze: 'C3',*/
styles: [
{
/*小框背景色*/
bgcolor: '#f4f5f8',
textwrap: true,
color: '#900b09',
border: {
top: ['thin', '#0366d6'],
bottom: ['thin', '#0366d6'],
right: ['thin', '#0366d6'],
left: ['thin', '#0366d6'],
},
},{
/*小框背景色*/
bgcolor: '#000000',
textwrap: true,
color: '#000000',
border: {
top: ['thin', '#000000'],
bottom: ['thin', '#000000'],
right: ['thin', '#000000'],
left: ['thin', '#000000'],
},
},
],
/*合并单元格*/
merges: [
'C3:E4',
],
rows: {
/*第1行*/
1: {
cells: {
/*第0列 2列*/
0: { text: 'testingtesttestetst' },
2: { text: 'testing' },
},
},
2: {
cells: {
0: { text: 'render', style: 0 },
1: { text: 'Hello' },
2: { text: 'haha', merge: [1, 2] },
}
},
8: {
cells: {
8: { text: 'border test', style: 0 },
}
}
},
},{
name:'aaaa',
/*freeze: 'C3',*/
styles: [
{
/*小框背景色*/
bgcolor: '#f4f5f8',
textwrap: true,
color: '#900b09',
border: {
top: ['thin', '#0366d6'],
bottom: ['thin', '#0366d6'],
right: ['thin', '#0366d6'],
left: ['thin', '#0366d6'],
},
},{
/*小框背景色*/
bgcolor: '#000000',
textwrap: true,
color: '#000000',
border: {
top: ['thin', '#000000'],
bottom: ['thin', '#000000'],
right: ['thin', '#000000'],
left: ['thin', '#000000'],
},
},
],
/*合并单元格*/
merges: [
'C3:E4',
],
rows: {
/*第1行*/
1: {
cells: {
/*第0列 2列*/
0: { text: 'testingtesttestetst' },
2: { text: 'testing' },
},
},
2: {
cells: {
0: { text: 'render', style: 0 },
1: { text: 'Hello' },
2: { text: 'haha', merge: [1, 2] },
}
},
8: {
cells: {
8: { text: 'border test', style: 0 },
}
}
},
}]
}
},
methods: {
},
mounted:function(){
/*中文*/
Spreadsheet.locale('zh-cn', zhCN);
new Spreadsheet('#x-spreadsheet-demo', this.options).loadData(this.optionss).change((data) => {
console.log(data)
});
}
}
</script>

<style>
</style>

标签：000000,text,cells,编译,thin,电子表格,true,0366d6
来源： https://www.cnblogs.com/zjxzhj/p/15040512.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。