vueelementuiexcel报表设计器插件

# vue-element-excel > 此插件 使用vue 基于element-ui，样式使用less语法，使用前应确保相关依赖已安装 ## 共包含四个插件： > [报表设计插件](#design) > [报表填报插件](#fill) > [报表展示插件](#show) > [公式设计插件](#calculation) ## 安装 vue-element-excel ``` bash npm i vue-element-excel ``` ## 全量引入 ```javascript // main.js import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import VueExcel from 'vue-element-excel' Vue.use(ElementUI); Vue.use(VueExcel); ``` ## 按需引入 ```javascript import Vue from 'vue' import ElementUI from 'element-ui'; import {DesignTable, EditTable, ShowTable,Calculation} from './lib'//按需引入 Vue.use(ElementUI); Vue.use(DesignTable);//design(设计) Vue.use(EditTable);//edit（填报） Vue.use(ShowTable);//show（展示） Vue.use(Calculation);//公式 ``` ## 调用 > 报表设计  ```html <template> <div class="atoname" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}"> <vue-excel :ref="attrDataConf.reportRef" :tableConfig="attrDataConf.table_config" :tableToolbarConf="attrDataConf.table_toolbar_data" :toolbarEvent="attrDataConf.toolbar_event" :inputTypeConfChange="inputTypeConfChange" :cellInputContentSet="cellInputContentSet" :treeProps="attrDataConf.inutTreeProps" :indrPprops="attrDataConf.indrPprops" :dimensionProp="attrDataConf.dimensionProp" :indicatorListProp="attrDataConf.indicatorListProp" :loadIndrNode="loadIndrNode" :indrSelectChange="indrSelectChange" :cellBindIndr="cellBindIndr" :dimensionData="dimensionData" :getIndrDatas="getIndrDatas" :treeLoadNode="treeLoadNode" :treeSelectedResChange="indrTreeSelectedResChange" :cellProps="attrDataConf.cellProps" :selectionRadioProp="attrDataConf.selectionRadioProp" :selectionCheckBoxProp="attrDataConf.selectionCheckBoxProp" :clearTreeSelected="clearTreeSelected" :confSelectionData="confSelectionData" :cellCalculationConfig="cellCalculationConfig" :confSelectionItemData="confSelectionItemData" @currentCellChange="currentCellChange" /> </div> </template> ``` ```javascript <script> export default { name:'designReport', props:{ datas:{ type:Object, default(){ return { attr_data_conf:{ reportRef:'myReport', table_config:{ rowCount:5,//行数 colCount:5,//列数 // height:300,//设置高度，垂直方向滚动 // width:'1500px',//设置宽度水平方向滚动 fixedHeaderCount:0,//头部固定行数 fixedLeftCount:0,//左边列固定列数 需要设置width fixedRightCount:0,//右边列固定列数 需要设置width tableData:null,//初始化数据 }, table_toolbar_data:["tableSet","readOnly","tableHeader","inputArea","calcArea","quote","split","bold","italic","underLine","fontSize","split","color","backgroundColor","textLeft","textCenter","textRight","setHeight","setWidth","textTop","vercicalMiddle","textBottom","split","locked","unlock","tablesetting","upload","splitMiddle","preview","tableValidate","save","share"], toolbar_event:{ locked(tableData){ console.log('锁定'); console.log(tableData) }, unlock(tableData){ console.log('解锁'); console.log(tableData) }, upload(tableData){ console.log('上传'); console.log(tableData) }, save(tableData){ debugger console.log(JSON.stringify(tableData)); console.log('保存'); console.log(tableData); }, preview(tableData){ console.log('预览'); console.log(JSON.stringify(tableData)); }, share(tableData){ console.log('分享'); console.log(tableData) }, tablesetting(tableData){ console.log('表格设置'); console.log(tableData) }, tableValidate(tableData){ console.log('表格校验'); console.log(tableData) } }, inutTreeProps: {//输入方式为树形结构的单元格树的数据prop label: (data,node)=>{ return data.name }, children: 'zones', isLeaf: (data,node)=>{ return node.level > 3 } }, //维度数据显示label prop dimensionProp:{label:'value'}, //指标列表 label prop indicatorListProp:{label:'value'}, indrPprops:{//指标树prop // label:'name',//label 支持 string 和 function label:(data, node)=>{ return data.name }, // children: 'zones', disabled:(data,node)=>{ if(node.level > 3)return false; else return true; }, isLeaf: (data,node)=>{ if(node.level > 3)return true; else return data.leaf; } }, selectionRadioProp:function(data){ return data.name }, selectionCheckBoxProp:function(data){ return data.name }, cellProps:{ radio:{ label:'name', value:'id' }, checkbox:{ label:'name', value:'name' }, tree:{ label:'name', value:'name' } } }, event_ele_conf:`{ created:function(){ }, mounted:function(){ }, inputTypeConfChange:function(cell,data){//输入方式改变时触发 if(!cell)return false;