vue3-ml-report

组件下载

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>