vue-element-excel v1.1.0

vue-element-excel

此插件 使用vue 基于element-ui，样式使用less语法，使用前应确保相关依赖已安装

安装 vue-element-excel

npm i vue-element-excel

全量引入

// 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);

按需引入

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);//公式

调用

<vue-excel />

也可以 传入参数

<vue-excel :attr_data_conf="{rowCount:20,colCount:8,state:'design'}" />

attr_data_conf={
    rowCount:20,//初始化excel行数
    colCount:8,//初始化excel列数
    state:'design',//设计状态：design；编辑（填报）状态：edit;展示状态：view
}

实例

template 部分

<template>
  <div class="hello">
    <p>
      <el-button type="primary" round @click="tabeStateChange('design')">设计</el-button>
      <el-button type="warning" round @click="tabeStateChange('edit')">填报</el-button>
      <el-button type="success" round @click="tabeStateChange('show')">展示</el-button>
      <el-button round @click="tabeStateChange('calc')">计算公式</el-button>
    </p>
    <!-- design table -->
    <p v-if="showTableState == 'design'">
      <vue-excel 
      ref="designExcel"
      :toolbarEvent="toolbarEvent"
      :tableConfig="tableConfig"
      :inputTypeConfChange="inputTypeConfChange"
      :cellInputContentSet="cellInputContentSet"
      :cellBindIndr="cellBindIndr"
      :treeLoadNode="treeLoadNode"
      :treeProps="treeProps"
      :treeSelectedResChange="treeSelectedResChange"
      :cellProps="cellProps"
      :clearTreeSelected="clearTreeSelected"
      @currentCellChange="currentCellChange" />
    </p>

<!-- edit table -->
<p v-if="showTableState == 'edit'">
  <edit-table 
  ref="editExcel"
  :tableConfig="editTableDataConf" 
  :treeLoadNode="editTreeLoadNode"
  :treeProps="treeProps"
  :treeSelectedResChange="editTreeSelectedResChange"
  :clearTreeSelected="clearEditTeeSelected"
  :cellProps="cellProps"
  @save="saveTable"
  @reset="resetTable"
  :title="'填报测试表格1'" />
</p>

<!-- show table -->
<p v-if="showTableState == 'show'">
  <show-table 
  :showRowNumber="false"
  :showColNumber="false"
  :tableDataConf="showTableDataConf">
    <p slot="title">展示测试表格1</p>
  </show-table>
</p>
<!-- 公式 -->
<p v-if="showTableState == 'calc'">
  <indr-calculation 
  @complete="completeCalculation"
  :getIndrDatas="calculationConf.getIndrDatas"
  :indrSelectChange="calculationConf.indrSelectChange"
  :dimensionData="calculationConf.dimensionData"
  :loadIndrNode="calculationConf.loadIndrNode"
  :existFuns="calculationConf.existFuns"
  :prop="calculationConf.indrProp" />
</p>
<!-- <vue-excel /> -->
<!-- <vue-excel :attr_data_conf="{rowCount:20,colCount:8,state:'design'}" /> -->
<!-- <Excel /> -->
<!-- <vue-element-less-excel /> -->