elemen vue memaparkan lajur tersembunyi secara dinamik

Apabila membina halaman menggunakan Vue.js dan UI Elemen, anda selalunya perlu menggunakan jadual untuk memaparkan data. Kadangkala adalah perlu untuk memaparkan atau menyembunyikan lajur tertentu secara dinamik supaya pengguna boleh menyesuaikan maklumat yang diperlukan mengikut keperluan mereka. UI Elemen menyediakan komponen jadual yang mudah, mudah digunakan dan berkuasa Artikel ini akan menumpukan pada cara untuk memaparkan atau menyembunyikan lajur secara dinamik dalam jadual UI Elemen.

1. Idea asas
Komponen jadual dalam UI Elemen menyediakan objek lajur dan setiap objek lajur boleh menetapkan sifat lajur. Oleh itu, jika anda ingin memaparkan atau menyembunyikan lajur secara dinamik, anda boleh menambah atribut kawalan v-jika pada objek lajur.

2. Contoh Analisis
Di sini kami mengambil komponen el-table dalam UI Elemen sebagai contoh untuk menunjukkan cara memaparkan atau menyembunyikan lajur secara dinamik melalui Vue.js. Katakan kita mempunyai satu set data seperti yang ditunjukkan di bawah. Lajur "Pengekodan" dan "Status" ialah lajur yang perlu dipaparkan atau disembunyikan secara dinamik.

1. Mula-mula, tambahkan kod berikut pada templat jadual:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      v-if="showCode"
      prop="code"
      label="编码">
    </el-table-column>
    <el-table-column
      v-if="showStatus"
      prop="status"
      label="状态">
    </el-table-column>
  </el-table>
</template>

2. Tambahkan pilihan data pada teg skrip dan tambahkan dua atribut data showCode dan showStatus, Nilai awal semuanya benar.

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, code: '001', status: '正常' },
        { name: '李四', age: 23, code: '002', status: '异常' },
        { name: '王五', age: 30, code: '003', status: '正常' },
        { name: '赵六', age: 40, code: '004', status: '异常' }
      ],
      showCode: true,
      showStatus: true
    }
  }
}
</script>

3. Akhir sekali, tukar nilai ShowCode dan showStatus dalam acara klik untuk memaparkan atau menyembunyikan lajur secara dinamik. Contohnya:

<el-button @click="showCode = !showCode">显示/隐藏编码</el-button>
<el-button @click="showStatus = !showStatus">显示/隐藏状态</el-button>

Selepas mengklik butang "Tunjukkan/Sembunyikan Pengekodan", anda boleh melihat kesan seperti yang ditunjukkan di bawah. Apabila nilai showCode adalah benar, lajur "Pengekodan" dipaparkan apabila nilai ShowCode adalah palsu, lajur "Pengekodan" disembunyikan.

4. Ringkasan
Artikel ini memperkenalkan cara untuk memaparkan atau menyembunyikan lajur secara dinamik dalam komponen jadual UI. Kami hanya perlu menambah atribut kawalan v-jika pada objek lajur dan menukar nilainya dalam operasi yang berkaitan untuk melaksanakan fungsi ini dengan mudah. Kaedah ini membolehkan pengguna bebas memilih maklumat yang mereka perlukan mengikut keperluan mereka, meningkatkan fleksibiliti dan kebolehubahsuaian halaman.

Atas ialah kandungan terperinci elemen vue memaparkan lajur tersembunyi secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!