Vue와 Excel을 사용하여 데이터를 동적으로 필터링하고 정렬하는 방법

Vue와 Excel을 사용하여 데이터를 동적으로 필터링하고 정렬하는 방법

1. 소개
Excel은 강력한 데이터 처리 도구이며 Vue는 사용자 인터페이스 구축을 위한 널리 사용되는 JavaScript 프레임워크입니다. 실제 개발에서는 Vue를 사용하여 Excel 테이블의 데이터를 동적으로 필터링하고 정렬해야 할 수도 있습니다. 이 기사에서는 Vue와 Excel을 사용하여 데이터를 동적으로 필터링하고 정렬하는 방법을 소개합니다.

2. 기술 준비
시작하기 전에 다음 소프트웨어를 설치했는지 확인하세요.

1. Node.js 및 npm: vue-cli 및 기타 종속성을 설치하는 데 사용됩니다.
2. Vue CLI: Vue 프로젝트를 생성하고 관리하는 데 사용됩니다.
3. pandas 및 openpyxl: Excel 파일 및 데이터 처리용.

3. Vue 프로젝트 만들기
먼저 Vue CLI를 사용하여 새 Vue 프로젝트를 만듭니다. 명령줄을 열고 다음 명령을 실행합니다.

vue create dynamic-excel
cd dynamic-excel

그런 다음 기본 구성을 선택하여 프로젝트를 만듭니다.

4. 필수 종속성 설치
다음으로 필수 종속성을 설치합니다. 명령줄에서 다음 명령을 실행하세요.

npm install xlsx vuetify axios

위 명령은 Excel 파일을 처리하는 데 사용되는 xlsx를 설치하고, 아름다운 사용자 인터페이스를 구축하는 데 사용되는 vuetify를 설치합니다.

5. 구성 요소 및 스타일 만들기
src 디렉터리에 구성 요소라는 폴더를 만들어 구성 요소를 저장합니다. Excel 테이블을 표시하려면 구성 요소 폴더에 ExcelTable.vue라는 파일을 만듭니다. 스타일 작성을 위해 스타일 폴더 아래에 ExcelTable.scss라는 파일을 만듭니다.

ExcelTable.vue 코드는 다음과 같습니다.

<template>
  <div class="excel-table">
    <input v-model="searchKey" placeholder="输入关键词进行筛选" />
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">{{ column }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in filteredData">
          <td v-for="column in row">{{ column }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
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;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.excel-table {
  input {
    margin-bottom: 10px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    th,
    td {
      border: 1px solid #ccc;
      padding: 5px;
    }
  }
}
</style>

ExcelTable.scss 코드는 다음과 같습니다.

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

6. ExcelTable 컴포넌트 사용
App.vue 파일에서 ExcelTable 컴포넌트를 사용합니다. 코드는 다음과 같습니다.

<template>
  <div class="app">
    <excel-table :data="data" :columns="columns" />
  </div>
</template>

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

7. 엑셀 파일 및 데이터 처리
다음으로 엑셀 파일 및 데이터 처리 방법을 소개하겠습니다. 도구 기능을 저장하려면 src 디렉터리에 utils라는 폴더를 만듭니다. Excel 파일 및 데이터 처리를 위해 utils 폴더 아래에 excel.js라는 파일을 만듭니다.

excel.js 코드는 다음과 같습니다.

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

8. 백엔드 데이터 처리
실제 상황에 따라 axios를 사용하여 백엔드에서 Excel 파일이나 데이터를 가져와 ExcelTable 구성 요소에 전달할 수 있습니다.

9. 컴파일 및 실행
명령줄에서 다음 명령을 실행하여 프로젝트를 컴파일하고 실행하세요.

npm run serve

브라우저를 열고 http://localhost:8080을 방문하여 동적으로 필터링되고 정렬된 Excel 테이블을 확인하세요.

요약
이 글에서는 Vue와 Excel을 사용하여 데이터를 동적으로 필터링하고 정렬하는 방법을 소개합니다. Vue 프로젝트 생성, 필요한 종속성 설치, 구성 요소 및 스타일 생성, Excel 파일 및 데이터 처리를 통해 마침내 동적으로 필터링되고 정렬된 Excel 테이블이 구현되었습니다. 이 기사가 Vue와 Excel을 사용하여 데이터를 동적으로 필터링하고 정렬하는 방법을 이해하는 데 도움이 되기를 바랍니다.

위 내용은 Vue와 Excel을 사용하여 데이터를 동적으로 필터링하고 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!