组件下载

npm i vue-ml-report

组件效果预览

全局使用方法

在 vue3 项目中全局引用的方式

//main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
import VueMlReportRef from 'vue-ml-report';
import 'vue-ml-report/lib/style.css';

const app = createApp(App);

app.use(VueMlReportRef);
app.mount('#app');

如果使用 ts+vite 的方式，需要在 env.d.ts 中加入最后一句声明，否则 ts 会检测报错。

/// <reference types="vite/client" />
declare module '*.vue' {
	import type { DefineComponent } from 'vue';
	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
	const component: DefineComponent<{}, {}, any>;
	export default component;
}

declare module 'vue-ml-report';

组件内使用

<script setup></script>

<template>
	<ml-report :sheets="sheets" :title="title" />
</template>

<style></style>

方法说明

| 方法 | 类型 | 描述 | | ------------------ | ------------------ | ---------------------- | | clearCellContentFn | Function() | 清除内容触发 | | cellClickFn | Function(event) | 单元格点击触发 | | onSave | Function(params) | 保存触发 |

内置函数说明

| 方法 | 类型 | 描述 | | ---------------- | ---------------------- | -------------- | | createLuckysheet | Function(title,sheets) | 创建表格 | | endDraggable | Function(cell) | 拖拽结束事件 | | cellFormatChange | Function(r,c,cell) | 数据格式化触发 |

内置方法使用示例

<script setup>
	import { ref } from 'vue';
	let MlReportRef = ref();
	function createLuckysheet() {
		// 这里从你接口拿数据
		let data = [];
		MlReportRef.value.createLuckysheet('测试表格', data);
	}
	function endDraggable() {
        // 拖拽结束后给报表赋值
        let cell = {};
		MlReportRef.value.endDraggable(cell);
	}
	function cellFormatChange() {
		MlReportRef.value.cellFormatChange(r, c, cell);
	}
</script>

<template>
	<ml-report ref="MlReportRef" />
</template>

<style></style>