web-spreadsheet documentation Github 

        <script>
  let columns = [
    {
      text: '出行人员姓名',
      key: 'name',
      type: 'input',
      width: '7em',
      props: {
        maxlength: 10
      },
      params: {
        validator: (value, row) => {
          const name = (value || '').trim();
          if (!name) return '请输入姓名';
          if (name.length > 10) return '姓名长度应小于等于10';
        }
      }
    },
    {
      text: '所属部门',
      key: 'dept',
      type: 'select',
      width: '5em',
      items: [
        { label: '运营部', value: 'OP' },
        { label: 'IT部', value: 'IT' }
      ]
    },
    {
      text: '证件类型',
      key: 'idType',
      type: 'select',
      width: '6em',
      items: [
        { label: '身份证', value: 'ID' },
        { label: '护照', value: 'PASSPORT' }
      ]
    },
    {
      text: '证件号码',
      key: 'idNumber',
      type: 'input',
      width: '8.5em',
      props: {
        maxlength: 18
      }
    },
    {
      text: '报名费',
      key: 'fee',
      align: 'right',
      type: 'input',
      width: '5em',
      props: {
        maxlength: 6
      },
      params: {
        validator: str => {
          if (!str) return;
          const num = +str;
          if (Number.isNaN(num)) return '请输入数字';
        },
        formatter: str => {
          const num = +str;
          return '￥' + num.toFixed(2);
        }
      }
    },
    {
      text: '总费用(含工本费)',
      key: 'totalFee',
      align: 'right',
      type: 'input',
      width: '9em',
      props: {
        maxlength: 6
      },
      params: {
        validator: str => {
          if (!str) return;
          const num = +str;
          if (Number.isNaN(num)) return '请输入数字';
        },
        formatter: str => {
          const num = +str;
          return '￥' + num.toFixed(2);
        },
        computed: (row, column) => {
          const num = +row.fee || 0;
          const imgLength = (row.pics || []).length;
          return (num + imgLength).toFixed(2);
        }
      }
    },
    {
      text: '照片',
      key: 'pics',
      type: 'image',
      width: '8.5em',
      props: {
        max: 3,
        uploadApi: 'http://192.168.105.11:28080/api/file/common/upload1'
      }
    },
    {
      text: '最近修改时间',
      key: 'updateTime',
      type: 'date',
      width: '8em'
    }
  ];
  let data = [
    {
      name: '张三',
      dept: 'OP',
      idType: 'ID',
      idNumber: '12341122234',
      fee: 33,
      pics: [
        'https://github.blog/wp-content/uploads/2019/03/product-social.png?fit=1201%2C630',
        '//fpoimg.com/400x400?text=Preview&bg_color=000000',
        '//fpoimg.com/400x400?text=Preview&bg_color=ffeeee'
      ],
      updateTime: '2020-02-01'
    },
    {
      name: '李四',
      dept: 'IT',
      idType: 'ID',
      idNumber: '987699967876',
      fee: 51,
      pics: ['//fpoimg.com/400x400?text=Preview&bg_color=eeffee'],
      updateTime: '2020-02-01'
    },
    {
      name: '王五',
      dept: 'OP',
      idType: 'PASSPORT',
      idNumber: '332314412',
      fee: 128,
      pics: [
        '//fpoimg.com/400x400?text=Preview&bg_color=eeeeff',
        '//fpoimg.com/400x400?text=Preview&bg_color=ffffee'
      ],
      updateTime: '2020-02-02'
    },
    {
      name: '赵六',
      dept: 'IT',
      idType: 'ID',
      idNumber: '8255478223',
      fee: 0,
      pics: [],
      updateTime: '2020-02-02'
    }
  ];
  while (data.length < 30) {
    data.push(...JSON.parse(JSON.stringify(data))); // copy some rows
  }
  window.onload = function () {
    let comp = document.querySelector('spread-sheet');
    comp.columns = columns;
    comp.data = data;
    window.addEventListener('change', e => {
      console.log(e.detail);
    });
  };
</script>

Intro

A simple Excel-like spreadsheet web component built with svelte.

How to use

Install with npm:

          npm install web-spreadsheet --save

and import it in your code:

          import 'web-spreadsheet';

You can also load the code from a CDN such as jsdelivr:

          <script src="https://cdn.jsdelivr.net/npm/web-spreadsheet@latest/lib/index.min.js"></script>

then you can use the customElement <spread-sheet /> in your HTML code.

If you're using it in a Vue.js project, you can pass proper props columns and data into customElement such as <spread-sheet :columns="columns" :data="rows"/> Then your spreadsheet will come into view.

The columns and data props look like the code on the left←

FEATURES

TODO