在线电子表格之比较-基于vue3

Handsontable与AntV S2表格组件示例

最新推荐文章于 2024-09-29 14:33:44 发布

原创最新推荐文章于 2024-09-29 14:33:44 发布 · 511 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

1.handsontable

npm install handsontable @handsontable/vue3

Installation - Vue 3 Data Grid | Handsontable

第一个示例

<template>
    <hot-table :data="data" :rowHeaders="true" :colHeaders="true"></hot-table>
  </template>
  
  <script>
    import { defineComponent } from 'vue';
    import { HotTable } from '@handsontable/vue3';
    import { registerAllModules } from 'handsontable/registry';
    import 'handsontable/dist/handsontable.full.css';
  
    // register Handsontable's modules
    registerAllModules();
  
    export default defineComponent({
      data() {
        return {
          data: [
            ['', 'Ford', 'Volvo', 'Toyota', 'Honda'],
            ['2016', 10, 11, 12, 13],
            ['2017', 20, 11, 14, 13],
            ['2018', 30, 15, 12, 13]
          ],
        };
      },
      components: {
        HotTable,
      }
    });
  </script>

实际效果：提示没有license

2.AntVs2

pnpm add @antv/s2@next @antv/s2-vue@next ant-design-vue@3.x

第一个示例

<template>
    <SheetComponent :dataCfg="dataCfg" :options="options" />
</template>
<script lang="ts">
import type { S2DataConfig, S2Options } from '@antv/s2';
import { SheetComponent } from '@antv/s2-vue';
import { defineComponent, onMounted, reactive, ref, shallowRef } from 'vue';
import "@antv/s2-vue/dist/style.min.css";



const s2Options = {
  width: 600,
  height: 480
}
const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type'],
    values: ['price'],
  },
  data: [
    {
      province: "浙江",
      city: "杭州",
      type: "笔",
      price: "1",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "纸张",
      price: "2",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "笔",
      price: "17",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "纸张",
      price: "6",
    },
    {
      province: "吉林",
      city: "长春",
      type: "笔",
      price: "8",
    },
    {
      province: "吉林",
      city: "白山",
      type: "笔",
      price: "12",
    },
    {
      province: "吉林",
      city: "长春",
      type: "纸张",
      price: "3",
    },
    {
      province: "吉林",
      city: "白山",
      type: "纸张",
      price: "25",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "笔",
      cost: "0.5",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "纸张",
      cost: "20",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "笔",
      cost: "1.7",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "纸张",
      cost: "0.12",
    },
    {
      province: "吉林",
      city: "长春",
      type: "笔",
      cost: "10",
    },
    {
      province: "吉林",
      city: "白山",
      type: "笔",
      cost: "9",
    },
    {
      province: "吉林",
      city: "长春",
      type: "纸张",
      cost: "3",
    },
    {
      province: "吉林",
      city: "白山",
      type: "纸张",
      cost: "1",
    }
  ]
};


export default defineComponent({
  setup() {
    // dataCfg 数据字段较多，建议使用 shallow, 如果有数据更改直接替换整个对象
    const dataCfg = shallowRef(s2DataConfig);
    const options: S2Options = reactive(s2Options);

    return {
      dataCfg,
      options,
    };
  },

  components: {
    SheetComponent,
  },
});



</script>
<style scoped>

</style>

实际效果：