Tingkatkan jadual data dengan Penghala Vue

Question

Saya cuba menambah pautan/butang pada baris dalam Jadual Data yang apabila diklik akan membawa anda ke laluan vue. Sudah tentu, saya hanya boleh menambah biasa <a> 链接，其中包含 href="/item/${id}". Tetapi ini memintas penghala dan menyebabkan keseluruhan halaman dimuat semula

Saya datang dengan dua penyelesaian, kedua-duanya bergantung pada tetapan onclick untuk melaksanakan beberapa kod:

1. Petikan dalam route1中，我将一个名为vueRoute的函数附加到window对象，该函数只是对vue方法route1. Fungsi ini kini boleh dipanggil dari mana-mana sahaja

2. Dalam route2 saya mempunyai route2 中，我让 onclick 触发 CustomEvent，并且我设置了一个事件侦听器以由 route2 pencetus CustomEvent dan saya menyediakan pendengar acara untuk mengendalikannya melalui kaedah route2 vue

Saya tidak berpuas hati dengan mana-mana penyelesaian. Walaupun mereka bekerja, mereka kelihatan "hacky". apa patut saya buat?

// datatables column definitions
columns: [
  // route1
  {
      data: 'id',
      render: function (dt) {
          return `<a href="#" onclick="(function(){vueRoute('${dt}');})()">route1</a>`;
      },
  },
  // route2
  {
    data: 'id',
    render: function (dt) {
        return `<a href="#" onclick="(function(){document.body.dispatchEvent(
          new CustomEvent('clickedEdit', {detail : ${dt} }));})() ">route2</a>`;
    },
  },
],

// vue methods
methods: {
  route1(id) {
    this.router.push('/item/' + id);
  },

  route2(evt) {
    this.router.push('/item/' + evt.detail);
  },
},

// on mount, set up route1 and route2
mounted() {
  window.vueRoute = this.route1;

  document.body.addEventListener('clickedEdit', this.route2);
},

Contoh yang berfungsi boleh didapati di sini: https://stackblitz.com/edit/datatables-net-vue3-simple-mgdhf1?file=src/components/ListView.vue

EDIT: Apa yang akhirnya saya lakukan ialah menukar kepada komponen jadual tanpa kepala (TanStack), yang berfungsi lebih baik dalam Vue daripada DataTables. Tetapi jika anda perlu menggunakan DataTables, penyelesaian yang dipaparkan di bawah oleh @Damzaky dan @Moritz Ringler akan berfungsi dengan baik

Answer 1

Saya tidak akan mengatakan ini adalah penyelesaian terbaik, tetapi pada pendapat saya, setakat yang saya tahu, tidak ada penyelesaian "terbaik" sebenar, kerana jadual data menggunakan jQuery dan anda menggunakan vue di sini (mesra kawalan DOM ) tidak konsisten) . Selepas carian pantas saya tidak menemui jalan Render komponen vue di dalam atribut render jadual data.

Jadi idea saya berbeza, ia memudahkan fungsi render dan menggunakan drawCallback untuk menambah pendengar acara dan menggunakan perwakilan acara untuk melampirkan pendengar.

Dari Dokumen:

data() {
    return {
      ...
      columns: [
        ...
        {
          data: 'id',
          render: function (dt) {
            return `route3`;
          },
        },
      ],
    };
  },
  methods: {
    ...
    drawCallback(settings) {
      const tableElm = document.getElementById(settings.sInstance);

      tableElm.addEventListener('click', (e) => {
        const id = e.target.dataset.itemId;

        if (id) {
          this.router.push('/item/' + id);
        }
      });
    },
  },
...

Jadi saya hanya tambahkan data-item-id pada setiap pautan dan kemudian gunakan acara klik ibu bapa untuk melakukan push router (delegasi acara). Saya tahu ini bukan jawapan yang terbaik, tetapi mungkin ini boleh menjadi pilihan lain untuk anda.

Ini ialah kotak pasir bercabang jika anda berminat.

Answer 2

Anda boleh menetapkan pengendali @click pada objek Jadual Data:

Acara ini akan menjadi acara klik biasa, jadi kami memerlukan atribut set data id yang boleh dikenal pasti:

{
  data: 'id',
  render: function (idValue) {
    return `route3`;
  },
},

Pengendali klik hanya perlu memastikan id boleh diambil, memastikan klik datang daripada pautan:

resolveRouteFromClick(e){
  const itemId = e.target.dataset.itemId
  if (!itemId) {
    return
  }
  e.preventDefault()
  this.router.push('/item/' + itemId);
}

Berikut ialah Stack Blitz

yang dikemas kini

---

Menariknya, sama seperti latar belakang, masalahnya bukanlah hubungan antara Vue dan jQuery, tetapi cara DataTables berfungsi, khususnya tiada peristiwa untuk klik sel atau klik baris, dan pemapar hanya boleh mengembalikan rentetan HTML .

Itu tidak menghairankan, begitulah cara jQuery berfungsi, di mana data, pandangan dan gelagat tidak dikaitkan secara intrinsik, tetapi anda boleh menyambungkannya mengikut cara yang anda rasa sesuai. Jadi kami tidak mempunyai acara klik sel untuk dieksploitasi kerana dalam jQuery anda menulisnya sendiri atau ia tidak wujud.

Cara paling berkesan untuk menetapkan pengendali dalam jQuery ialah menetapkan acara pada jadual menggunakan penapis sasaran:

$('.datatable').on('click', 'a[data-item-id]', function(){...})

Kelebihannya ialah:

• Hanya satu peristiwa berlaku untuk semua baris
• Tidak perlu menambah acara apabila menukar halaman atau memaparkan semula
• Kod dalam fungsi pemaparan disimpan pada tahap minimum

Penyelesaian Vue di atas melakukan perkara yang sama, hanya tanpa jQuery.

Jadi saya rasa ini adalah cara paling berkesan untuk menjadikannya berfungsi dalam Vue, baik dari segi saiz kod (kebolehselenggaraan) dan prestasi.

Perhatikan bahawa memandangkan DataTable memerlukan jQuery boleh diakses secara global, ia juga boleh digunakan dalam komponen Vue anda, dan anda boleh meletakkan pernyataan jQuery yang diberikan ke dalam cangkuk mounted di mana anda boleh mengakses Penghala Vue dalam panggilan balik. Jadi daripada meletakkan penghala dalam skop global untuk menggunakannya pada bahagian jQuery, anda boleh menggunakan objek yang sudah wujud di bahagian Vue.
Namun, kerana tidak perlu mencampurkan jQuery ke dalam kod Vue anda, saya akan mengelakkannya dan menggunakan penyelesaian Vue sahaja di atas.