구성 요소의 v-data-table: 기본적으로 모든 항목이 선택되도록 하려면 어떻게 해야 합니까?

구성 요소의 v-data-table: 기본적으로 모든 항목이 선택되도록 하려면 어떻게 해야 합니까?

나는 가지고 있다v-data-table컴포넌트에 포함되어 있으며, 에 의해 작성된 체크박스를 사용하고 있습니다.select-all컴포넌트의 부모 정보를 필터링 합니다.선택한 행이 없습니다.모두 디폴트로 체크해 주셨으면 합니다.

효과가 없었던 것:

• 어버이data: 설정selectedItems로.Array.from(this.$store.state.tableItems)기본적으로(스토어의 항목이 해당 지점에서 정의되지 않음)
• 에서mounted또는created자 이벤트: 설정selectedItems로.Array.from(this.tableItems)(이로 인해 "프롭을 직접 변환하는 중" 오류가 발생합니다.)

계산된 속성으로 이 작업을 수행할 수 있는 방법이 있을 것 같습니다.

(행동이나 이벤트 같은 것을 사용하는 보다 관용적인 방법이 있을까요?Vue는 처음입니다.)

마이 컴포넌트표시하다

<template>
  <v-data-table
    :value="selectedItems"
    @input="$emit('update:selectedItems', $event)"
    :headers="headers"
    :items="tableItems"
    item-key="id"
    select-all
  >
    <template slot="items" slot-scope="props">
      <td>
        <v-checkbox v-model="props.selected" hide-details></v-checkbox>
      </td>
      <td>{{ props.item.id }}</td>
    </template>
  </v-data-table>
</template>
<script>
export default {
  props: {
    tableItems: { type: Array, },
    selectedItems: { type: Array, },
  },
  data() {
    return {
      headers: [
        { text: 'ID', value: 'id', },
      ],
    };
  },
};
</script>

Parent.vue

<template>
  <MyComponent :tableItems="tableItems" :selectedItems.sync="selectedItems"/>
</template>
<script>
export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      selectedItems: [],
    };
  },
  computed: {
    tableItems() {
      return this.$store.state.tableItems;  // set by an axios request in beforeCreate in App.vue
    },
  }
};
</script>

네, 아래가 효과가 있었습니다(이미 Vuex를 사용하고 있었습니다).하지만 다른 사람이 좀 더 만족스러운 답변을 해 주셨으면 합니다.

store.displaces를 설정합니다.

여기서 선택한 항목을 추적합니다.기본값 null은 첫 번째 Axios 호출 종료 후 테이블 항목을 설정할 때 기본값을 설정할 수 있도록 설정되어 있습니다.

export default new Vuex.Store({
  state: {
    tableItems: {},
    selectedItems: null,
  },
  mutations: {
    setTableItems(state, payload) {
      state.tableItems= payload;
      if (state.selectedItems == null) state.selectedItems = payload;
    },
    setSelectedItems(state, payload) {
      state.selectedItems = payload;
    },
  }
});

마이 컴포넌트표시하다

여기서 변경된 점은 선택한 요소를 데이터 테이블의 값으로 Vuex 저장소에 사용하고 모든 입력에 대해 변환을 수행한다는 것입니다.

<template>
  <v-data-table
    :value="selectedItems"
    @input="updateSelectedItems"
    :headers="headers"
    :items="tableItems"
    item-key="id"
    select-all
  >
    <template slot="items" slot-scope="props">
      <td>
        <v-checkbox v-model="props.selected" hide-details></v-checkbox>
      </td>
      <td>{{ props.item.id }}</td>
    </template>
  </v-data-table>
</template>
<script>
export default {
  props: {
    tableItems: { type: Array, },
  },
  data() {
    return {
      headers: [
        { text: 'ID', value: 'id', },
      ],
    };
  },
  methods: {
    updateSelectedItems(event) {
      this.$store.commit("setSelectedItems", event);
    },
  },
  computed: {
    selectedItems() { return this.$store.state.selectedItems; },
  }
};
</script>

Parent.vue

결과적으로 훨씬 단순해지고 데이터 바인딩이 줄어들어 스토어만 참조할 수 있습니다.

<template>
  <MyComponent :tableItems="tableItems"/>
</template>
<script>
export default {
  components: {
    MyComponent,
  },
  computed: {
    tableItems() { return this.$store.state.tableItems; },
    selectedItems() { return this.$store.state.selectedItems; },
  }
};
</script>

언급URL : https://stackoverflow.com/questions/59276577/v-data-table-in-component-how-to-have-all-items-selected-by-default