Bagaimana untuk mengoptimumkan paparan jadual dan fungsi lajur tersembunyi dalam pembangunan Vue

Cara mengoptimumkan paparan jadual dan fungsi lajur tersembunyi dalam pembangunan Vue

Dalam pembangunan Vue, jadual ialah komponen UI biasa, yang digunakan untuk memaparkan sejumlah besar data dan menyediakan carian data, pengisihan, halaman dan fungsi lain. Salah satu keperluan biasa ialah untuk menunjukkan atau menyembunyikan lajur tertentu dalam jadual supaya kandungan paparan jadual boleh dilaraskan secara dinamik mengikut keperluan pengguna. Artikel ini akan memperkenalkan cara mengoptimumkan paparan jadual dan fungsi lajur tersembunyi dalam pembangunan Vue untuk meningkatkan pengalaman pengguna dan kecekapan pembangunan.

1. Gunakan arahan v-if untuk memaparkan atau menyembunyikan lajur secara dinamik

Vue menyediakan arahan v-if untuk memaparkan elemen DOM secara dinamik berdasarkan syarat. Kami boleh menunjukkan atau menyembunyikan lajur secara dinamik berdasarkan pemilihan pengguna menggunakan arahan v-if. Mula-mula, tentukan tatasusunan lalai objek lajur dalam jadual untuk mengawal status paparan setiap lajur:

data() {
  return {
    columns: [
      { label: '列1', key: 'column1', visible: true },
      { label: '列2', key: 'column2', visible: true },
      { label: '列3', key: 'column3', visible: true },
    ]
  }
},

Gunakan arahan v-if dalam ke dan td jadual untuk memutuskan sama ada untuk memaparkan lajur berdasarkan atribut yang boleh dilihat objek lajur:

<th v-for="column in columns" v-if="column.visible">{{ column.label }}</th>
<td v-for="column in columns" v-if="column.visible">{{ rowData[column.key] }}</td>

Apabila pengguna memilih untuk menyembunyikan lajur tertentu, dia hanya perlu mengemas kini atribut boleh dilihat bagi lajur yang sepadan dalam tatasusunan lajur kepada palsu untuk menyembunyikan lajur secara dinamik.

2. Gunakan komponen kotak semak untuk mengawal paparan dan penyembunyian lajur

Selain menggunakan arahan v-if untuk memaparkan atau menyembunyikan lajur secara dinamik, kami juga boleh menambah komponen kotak semak untuk membenarkan pengguna memilih lajur yang ingin ditunjukkan atau bersembunyi. Kami boleh menggunakan data responsif Vue untuk mengikat keadaan kotak pilihan yang dipilih untuk mengawal paparan atau penyembunyian lajur.

Mula-mula, tambahkan komponen kotak pilihan pada jadual:

<input type="checkbox" v-model="showColumn1">显示列1
<input type="checkbox" v-model="showColumn2">显示列2
<input type="checkbox" v-model="showColumn3">显示列3

Kemudian, gunakan atribut yang dikira dan arahan v-if dalam ke dan td jadual untuk memaparkan lajur secara dinamik berdasarkan keadaan kotak pilihan yang dipilih:

<th v-if="showColumn1">{{ columns[0].label }}</th>
<td v-if="showColumn1">{{ rowData.columns[0].key }}</td>
<th v-if="showColumn2">{{ columns[1].label }}</th>
<td v-if="showColumn2">{{ rowData.columns[1].key }}</td>
<th v-if="showColumn3">{{ columns[2].label }}</th>
<td v-if="showColumn3">{{ rowData.columns[2].key }}</td>

Dalam ini kaedah , apabila pengguna memilih untuk menunjukkan atau menyembunyikan lajur, data pengikatan kotak semak yang sepadan akan dikemas kini, mencetuskan pengiraan semula atribut yang dikira, dan kemudian memutuskan sama ada untuk memaparkan lajur yang sepadan.

3. Gunakan pemalam vue-tables-2 untuk melaksanakan lebih maju menunjukkan dan menyembunyikan fungsi lajur

Kaedah di atas boleh memenuhi keperluan asas tunjukkan dan sembunyikan lajur, tetapi apabila terdapat lebih banyak lajur yang perlu diproses atau keperluan adalah lebih kompleks, kita boleh menggunakan pemalam vue -tables-2, yang menyediakan fungsi yang lebih berkuasa, seperti menyeret lajur untuk melaraskan susunan, membekukan lajur, menggabungkan lajur, dsb.

Pasang pemalam vue-tables-2:

npm install vue-tables-2

Daftar pemalam vue-tables-2 dalam Vue:

import { ServerTable, Event } from 'vue-tables-2';

Vue.use(ServerTable, {}, false, 'bootstrap4', 'default');

Kemudian, gunakan komponen yang disediakan oleh pemalam vue-tables-2 dalam jadual dan konfigurasikan parameter yang berkaitan:

<server-table :columns="columns" :options="options"></server-table>

...

data() {
  return {
    columns: [
      { name: '列1', title: '列1', visible: true },
      { name: '列2', title: '列2', visible: true },
      { name: '列3', title: '列3', visible: true },
    ],
    options: {
      ...
      columnsDropdown: true,
      columnsDisplay: ['column1', 'column2', 'column3'],
      columnsClasses: {
        column1: 'custom-class',
        column2: 'custom-class',
        column3: 'custom-class',
      },
      customFilters: [' column1', 'column2', 'column3'],
      ...
    }
  }
},

Dengan mengkonfigurasi parameter seperti lajur dan pilihan, kami boleh mencapai fungsi yang lebih maju untuk menunjukkan dan menyembunyikan lajur, dan boleh melaraskan susunan paparan lajur, menetapkan gaya lajur, dsb.

Dengan mengoptimumkan paparan jadual dan fungsi lajur tersembunyi dalam pembangunan Vue, kami boleh meningkatkan pengalaman pengguna dan kecekapan pembangunan. Ketiga-tiga kaedah yang dinyatakan di atas masing-masing mempunyai kelebihan dan kekurangan masing-masing. Pilih kaedah yang sesuai mengikut keperluan khusus anda untuk mencapai fungsi menunjukkan dan menyembunyikan lajur. Penulis berharap dapat membantu pembaca menangani masalah memaparkan dan menyembunyikan lajur dalam jadual dengan lebih baik semasa pembangunan Vue.

Atas ialah kandungan terperinci Bagaimana untuk mengoptimumkan paparan jadual dan fungsi lajur tersembunyi dalam pembangunan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!