사용자 정의 테이블 vue의 가치를 얻는 방법

Vue에서 사용자 정의 테이블의 값을 얻는 방법

Vue.js에서 테이블은 v-for 명령 루프를 사용하여 렌더링됩니다. 사용자 정의 데이터가 테이블(예: 드롭다운 목록 상자, 라디오 버튼, 확인란 등)에 존재하면 테이블에서 이러한 사용자 정의 데이터의 값을 가져오는 편리한 방법이 필요합니다. 이 기사에서는 Vue.js에서 사용자 정의 테이블의 값을 가져오는 방법을 소개합니다.

먼저, 사용자 정의 테이블에는 일반적으로 구성 요소가 포함되어 있으므로 Vue.js 구성 요소의 수명 주기를 이해해야 합니다. Vue.js 컴포넌트에는

beforeCreate,created, beforeMount,mounted, beforeUpdate,update, beforeDestroy, destroy, errorCaptured

의 9가지 라이프사이클 함수가 있습니다. 그 중에서 우리는 생성되고 마운트된 두 가지 라이프사이클 함수를 사용합니다. 사용자 정의 테이블 값을 구현합니다.

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-select 요소에 v-model 지시어를 추가했습니다.

Summary

Vue.js의 사용자 정의 테이블은 더 많은 데이터와 정보를 제시하고 처리할 수 있는 유연성을 제공합니다. Vue.js의 기능을 사용하면 사용자 정의 테이블에서 데이터를 쉽게 가져오고 처리할 수 있습니다. 이 기사에서는 사용자 정의 테이블의 값을 얻기 위해 생성 및 마운트된 두 가지 라이프사이클 함수를 사용합니다. 또한 $refs 속성을 사용하여 DOM 요소를 참조하는 방법도 다루었습니다.

위 내용은 사용자 정의 테이블 vue의 가치를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!