Excel 和 Vue 强强联手，数据处理轻松搞定

Excel和Vue这两个软件真是太好用了！Excel大家都知道，Vue就是前端界的老大，功能强到爆表！特别是数据绑定，能实时看到数据变动，还能筛选和排序。下面我来教你们怎么用它们一起搞定数据处理。

技术准备

首先，得在电脑上安装Node.js和npm这哥儿俩，才能搞定VueCLI之类的活儿。紧接着，我安装了VueCLI，这个东西牛逼哄哄的，一学就会还特好用，搭建Vue项目变得无比轻松。至于Excel，我用pandas和openpyxl这俩神器，处理Excel文件和数据简直小菜一碟！

创建Vue项目

开始做Vue项目，首先得创建个新文件。直接在命令行输入命令，然后挑个默认设置就好了。虽然简单，但这个步骤很重要。只有做好准备，后面的路才能顺顺利利。

vue create dynamic-excel
cd dynamic-excel

安装必要的依赖

我搞定！安上xlsx就能用Excel弄资料，再加上vuetify让界面更好看，还有axios帮我搞网络请求。这下子，我对这个项目的功能更有把握了。

npm install xlsx vuetify axios

创建组件和样式

搞定了src文件夹下的Components文件夹中的ExcelTable.vue文件，主要功能就是显示Excel表格！当然别忘了还有ExcelTable.scss文件，这可是用来给ExcelTable添妆的！整个过程挺有趣的，想咋搞就咋搞！

使用ExcelTable组件

就是把那个ExcelTable东西拖到App.vue文件里那么简单，轻松搞定！刚注册完就能随便用。

  

    
    

      

        

          
{{ column }}
        
      
      

        

          
{{ column }}
        
      
    
  


export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searchKey: ""
    };
  },
  computed: {
    filteredData() {
      if (this.searchKey) {
        return this.data.filter(row => {
          return row.some(column => {
            return column.includes(this.searchKey);
          });
        });
      } else {
        return this.data;
      }
    }
  }
};


.excel-table {
  input {
    margin-bottom: 10px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    th,
    td {
      border: 1px solid #ccc;
      padding: 5px;
    }
  }
}

处理Excel文件和数据

@import "~vuetify/src/styles/styles.sass";

在我电脑上的src文件夹里新搞了个utils文件夹，放了个叫做excel.js的小程序，它可以帮你搞定Excel里的数据。这个小程序里有几个很厉害的函数，它们能让你轻松地读出和处理Excel中的数据。

处理后端数据

这儿，我刚学会了一招儿，就是用那个叫axios的小助手，把后边的表格文件或数据拿过来，再交给ExcelTable大侠帮忙处理。这么一搞，咱们网站前台和后台就能互相聊聊天，就像你们平时说的“交朋友”那样。所以，这个步骤在项目中可是挺关键的

  

    
  


import ExcelTable from "./components/ExcelTable.vue";
export default {
  components: {
    ExcelTable
  },
  data() {
    return {
      data: [],
      columns: []
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 使用axios从后端获取数据
      // 此处省略数据请求的具体代码
      // 然后将数据赋值给this.data和this.columns
    }
  }
};

编译和运行

终于搞定编译和运行了，浏览器里的项目开始跑！看Excel表格动来动去，还能筛选排序，真是超赞，心情特美！

这方法让我学会用Vue和Excel做动态的数据筛选排序，真有趣儿，效果也挺好的。要是你有啥问题或想聊聊，别客气，直说希望你能喜欢这篇文章，学点儿东西就更棒了！

import XLSX from "xlsx";
export function readExcel(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: "array" });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];
      const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      resolve(json);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}