カスタムテーブルビューの値を取得する方法

カスタム テーブル vue の値を取得する方法

Vue.js では、テーブルは v-for 命令ループを使用してレンダリングされます。カスタム データ (ドロップダウン リスト ボックス、ラジオ ボタン、チェックボックスなど) がテーブルに存在すると、テーブルからこれらのカスタム データの値を取得する便利な方法が必要になります。この記事では、Vue.jsでカスタムテーブルの値を取得する方法を紹介します。

まず、カスタム テーブルには通常コンポーネントが含まれるため、Vue.js コンポーネントのライフ サイクルを理解する必要があります。 Vue.js コンポーネントには 9 つのライフサイクル関数があります。

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、errorCaptured

その中で、created を使用します。カスタム テーブルの値を実装するための 2 つのライフサイクル関数をマウントしました。

1. 作成したライフサイクル関数では、テーブル ヘッダーやテーブル行など、テーブルのデータ モデルを定義する必要があります。次のコードは、テーブル ヘッダーとテーブル行を含むテーブル データ モデルを実装します。

created() {
  this.headers = [
    { text: 'Name', value: 'name' },
    { text: 'Age', value: 'age' },
    { text: 'Gender', value: 'gender' },
    { text: 'Hobby', value: 'hobby' }
  ]
  this.items = [
    { name: 'John', age: 25, gender: 'Male', hobby: 'Basketball' },
    { name: 'Mary', age: 30, gender: 'Female', hobby: 'Singing' },
    { name: 'David', age: 28, gender: 'Male', hobby: 'Dancing' },
    { name: 'Rachel', age: 22, gender: 'Female', hobby: 'Reading' }
  ]
}

2. マウントされたライフサイクル関数では、カスタム テーブルの値を取得する関数を作成する必要があります。 Vue.js の $refs 属性を使用して、テーブル内の DOM 要素を参照し、DOM 要素から値を取得します。次のコードは、テーブル内のカスタム データ値を取得する関数を実装します。

mounted() {
  this.getSelectedValues = function() {
    let items = this.$refs.table.getSelectedItems()
    let selectedValues = []
    for (let item of items) {
      selectedValues.push(item.hobby)
    }
    return selectedValues
  }
}

このコードでは、$refs.table.getSelectedItems() 関数を呼び出して、選択されたデータ項目を取得します。次に、for ループを使用して選択したデータ項目を反復処理し、その趣味属性値を selectedValues 配列に追加し、最後に配列を返します。

3. 最後に、テーブルにカスタム データを追加し、$refs 属性を使用して参照できるように、カスタム列の DOM 要素に ref 属性を必ず追加します。次のコードは、カスタム データを追加し、DOM 要素をテーブルに参照する方法を示しています。

<v-data-table :headers="headers" :items="items" ref="table">
  <template v-slot:item.hobby="{ item }">
    <v-select v-model="item.hobby" :items="hobbies" ref="hobby" label="Hobby"></v-select>
  </template>
  <template v-slot:body>
    <tbody>
      <tr v-for="(item, index) in items" :key="index" v-bind:style="[ index % 2 == 0 ? { background: '#f2f2f2' } : {} ]">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
        <td><v-select v-model="item.hobby" :items="hobbies" label="Hobby"></v-select></td>
      </tr>
    </tbody>
  </template>
</v-data-table>

この例では、v-select コンポーネントをカスタム データとして使用します。 DOM 要素を参照するには、v-select 要素に ref 属性を追加する必要があります。また、v-select 列をテーブルに追加する方法も示しました。最後に、ユーザーの選択を両方向にバインドできるように、v-model ディレクティブを v-select 要素に追加しました。

概要

Vue.js のカスタム テーブルを使用すると、より多くのデータと情報をより柔軟に表示および処理できます。 Vue.js の機能を使用すると、カスタム テーブルからデータを簡単に取得して処理できます。この記事では、カスタム テーブルの値を取得するために作成およびマウントされた 2 つのライフサイクル関数を使用します。 $refs 属性を使用して DOM 要素を参照する方法についても説明しました。

以上がカスタムテーブルビューの値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。