vue中使用x-Spreadsheet创建表格组件

一. 使用npm引入x-spreadsheet

npm i --save x-data-spreadsheet

二. 使用x-spreadsheet创建简单的表格组件

官网文档链接：快速上手 | X-Spreadsheet中文文档 (hondrytravis.com)

<template>
  <div id="x-spreadsheet"></div>
</template>

<script>
import Spreadsheet from "x-data-spreadsheet";
import zhCN from "x-data-spreadsheet/dist/locale/zh-cn";

Spreadsheet.locale("zh-cn", zhCN);
export default {
  name: "SpreadSheet",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const xs = new Spreadsheet("#x-spreadsheet", {
        // 修改x-spreadsheet默认配置
        showToolbar: false, //隐藏顶部工具栏
        showBottomBar: false, //隐藏底部工具栏
        view: {
          // 设置表格宽高
          height: () => 500,
          width: () => 500,
        },
        // 设置行数
        row: {
          len: 50,
          height: 30,
        },
        // 设置列数
        col: {
          len: 26,
          width: 100,
          indexWidth: 40, //行数索引宽度
          minWidth: 60,
        },
        // 修改字体的背景颜色和内容
        style: {
          // 字体颜色框背景 --- 单元格存在内容时改变颜色
          bgcolor: "#94d1fa",
          // 字体居中
          align: "center",
        },
      })
        .loadData({})
        .change((data) => {
          // 列表数据改变时触发
          console.log(data);
        });
      xs.validate();
    },
  },
};
</script>

<style lang="less" scoped>
#x-spreadsheet {
  width: 500px;
  height: 500px;
  margin-top: 20px;
  background-color: #1e253a;

  /* 深度选择--修改表格背景 */
  /deep/ .x-spreadsheet {
    background-color: #94d1fa;
    .x-spreadsheet-editor-area {
      border: none;
      /* 修改输入框背景色 */
      textarea {
        background-color: #94d1fa;
      }
    }
  }
}
</style>

三. 运行结果查看