Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

yuexing91/vspread

Open more actions menu

Repository files navigation

v-spread

vue.js版的在线电子表格 在线预览

开始

# install dependencies
npm install

# serve with hot reload at localhost:4000
npm run dev

# build for production with minification
npm run build

import vspread from 'vspread'
//选项
const options = {
  // 行的信息
  rows: [
    {
      hpx: 100,//行高
      h: false,//是否隐藏
      s: 's1', //对应RCStyles中的样式ID
    },
  ],
  // 列的信息
  columns: [
    {
      wpx: 100,//列宽
      h: false,//是否隐藏
      s: 's1',//对应RCStyles中的样式ID
    },
  ],
  // 合并单元格的信息
  merges: [
    {
      start: {
        rowIndex: 0,
        columnIndex: 0,
      },
      end: {
        rowIndex: 1,
        columnIndex: 1,
      },
    },
  ],
  // 单元格信息
  cells: {
    0: [
      {
        v: 123, //单元格的值
        s: 's2',//样式ID
      },
      null,
      {
        s: 's2',
        fs: 'A1',//公式
      },
    ],
  },
  // 样式信息
  styles: {
    s2: {
      'border': 'blrt',
      'backgroundColor': '#ffff00',
      'color': '#ff1400',
      'fontFamily': '微软雅黑',
      'fontSize': 12,
      'fontStyle': 'italic',
      'fontWeight': 'bold',
      'textDecoration': 'underline',
      'textAlign': 'center',
      'verticalAlign': 'middle',
      'whiteSpace': 'normal',
    },
  },
  //行列样式
  RCStyles: {
    s1: {
      'border': undefined,
      'backgroundColor': undefined,
      'color': '#ff1400',
      'fontFamily': '微软雅黑',
      'fontSize': 12,
      'fontStyle': 'italic',
      'fontWeight': 'bold',
      'textDecoration': 'underline',
      'textAlign': 'center',
      'verticalAlign': 'middle',
      'whiteSpace': 'normal',
    },
  },
  //行的数量
  rowCount: 200,
  //列的数量
  columnCount: 20,
  //允许的最大行
  maxRowCount: 10000,
  //允许的最大列
  maxColumnCount: 200,
};

new Vue({
  el: '#app',
  data() {
    return {
      options,
      //是否显示菜单
      menu:true,
      //是否自动补齐行列
      autoCreate:true
    };
  },
  template: '<vspread :options="options" :menu="menu" :autoCreate="autoCreate"/>',
  components: { vspread },
});

License

MIT

Copyright (c) 2020-present, yuexing91

Releases

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.