Cara menapis dan mengisih data menggunakan Vue dan Element-UI

Cara menggunakan Vue dan Element-UI untuk penapisan dan pengisihan data

Vue.js ialah rangka kerja JavaScript yang sangat popular, dan Element-UI ialah perpustakaan komponen berdasarkan Vue, yang menyediakan set kaya komponen UI yang boleh digunakan untuk memudahkan kerja pembangunan kami. Dalam banyak projek sebenar, kami biasanya perlu menapis dan mengisih data, jadi bagaimana untuk menggunakan Vue dan Element-UI untuk melengkapkan keperluan ini? Dalam artikel ini, kita akan mempelajari cara menggunakan Vue dan Element-UI untuk menapis dan mengisih data.

Pertama, kita perlu memperkenalkan Element-UI ke dalam projek Vue. Jika anda belum lagi menggunakan Vue dan Element-UI, anda boleh memasangnya melalui npm.

npm install vue
npm install element-ui

Selepas pemasangan selesai, kami perlu memperkenalkan gaya Elemen-UI dan Vue.use() dalam fail main.js.

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

Seterusnya, kami boleh mencipta komponen yang dipanggil DataFilterSort, di mana kami menunjukkan cara menggunakan Vue dan Element-UI untuk menapis dan mengisih data.

<template>
  <div>
    <el-row>
      <el-input v-model="keyword" placeholder="请输入关键字" class="inputItem"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-row>
    <el-table :data="filteredData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄" sortable></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '', // 筛选关键字
      data: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
        { name: '赵六', age: 24, address: '深圳市' }
      ]
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item.name.indexOf(this.keyword) !== -1;
      });
    }
  },
  methods: {
    search() {
      // 筛选功能
    }
  }
};
</script>

<style scoped>
.inputItem {
  width: 200px;
  margin-right: 10px;
}
</style>

Dalam contoh ini, kami memperkenalkan komponen yang dipanggil DataFilterSort Pertama, kami menambah kotak input dan butang carian pada templat untuk memasukkan kata kunci penapis dan mencetuskan fungsi carian. Seterusnya, kami menggunakan komponen el-table Element-UI untuk memaparkan data, dan menentukan medan data dan nama label untuk dipaparkan dalam el-table-column. Selain itu, kami juga mendayakan fungsi boleh isih medan umur dengan menetapkan atribut boleh isih bagi lajur el-jadual.

Dalam data, kami mengisytiharkan atribut data bernama kata kunci untuk menyimpan nilai kotak input. Dalam pengiraan, kami mentakrifkan sifat terkira bernama filteredData, yang menggunakan kaedah penapis tatasusunan untuk menapis data Syarat penapis ialah sama ada medan nama mengandungi nilai kata kunci. Dalam kaedah, kami mentakrifkan kaedah yang dipanggil carian untuk melaksanakan fungsi penapisan data.

Apabila kata kunci berubah, atribut filteredData yang dikira akan dikira semula untuk melaksanakan fungsi penapisan data. Apabila anda mengklik butang carian, kaedah carian akan dicetuskan untuk menapis data.

Cuba gunakan komponen ini dalam projek Vue Kami akan mendapati bahawa selepas memasukkan kata kunci, data akan ditapis mengikut syarat penapis dan dipaparkan pada halaman dalam masa nyata. Dengan mengklik pada lajur umur dalam pengepala jadual, data akan diisih mengikut umur.

Melalui contoh dalam artikel ini, saya percaya anda telah menguasai cara menggunakan Vue dan Element-UI untuk menapis dan mengisih data. Fungsi ini boleh membantu kami mengendalikan data dengan lebih mudah dan meningkatkan kecekapan pembangunan. Saya berharap anda mendapat hasil yang lebih baik dalam pembangunan Vue dan Element-UI!

Atas ialah kandungan terperinci Cara menapis dan mengisih data menggunakan Vue dan Element-UI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!