vuetify 데이터 테이블을 사용하여 어레이의 인덱스를 표시하는 방법

vuetify 데이터 테이블을 사용하여 어레이의 인덱스를 표시하는 방법

내 vue 인스턴스로 전달되는 데이터 배열이 있는 서버에서 응답을 받았다.나는 그 배열을 이용하여 데이터 표를 완성했다.그러나 일련 번호에 대한 내 어레이의 인덱스를 표시하는 방법만 알면 된다.

내 컴포넌트 코드를 첨부한다. 내 응답은 괜찮고 테이블도 괜찮다.나는 단지 칼럼을 더 늘려서 거기에 지수 값을 표시하면 된다.

나의 어레이 이름은 고객이다.

<v-data-table
  v-bind:headers="headers"
  v-bind:items="customers"
  v-bind:search="search"
  v-cloak
  >
  <template slot="items" scope="props">
  <td class="text-xs-center">@{{ props.item.id }}</td>
  <td class="text-xs-center">
    <v-edit-dialog
      lazy
      @{{ props.item.name }}
      >
      <v-text-field
        slot="input"
        label="Edit"
        v-model="props.item.name"
        single-line
        counter
        :rules="[max25chars]"
        ></v-text-field>
    </v-edit-dialog>
  </td>
  <td class="text-xs-center">@{{ props.item.email }}</td>
  <td class="text-xs-center">@{{ props.item.email }}</td>
  <td class="text-xs-center">@{{ props.item.created_at }}</td>
  <td class="text-xs-center">
    <v-btn small outline fab class="red--text" @click="showWarning(props.item.id)">
      <v-icon>mdi-account-remove</v-icon>
    </v-btn>
    <v-btn small outline fab class="green--text" @click="showWarning(props.item.id)">
      <v-icon>mdi-account-off</v-icon>
    </v-btn>
  </td>
  </template>
  <template slot="pageText" scope="{ pageStart, pageStop }">
    From @{{ pageStart }} to @{{ pageStop }}
  </template>
</v-data-table>

EDIT 7/30/19 @titou10에서 언급한 바와 같이, Vuetify 2.0 안에는 인덱스 필드가 없다.

잠시 주위를 둘러본 후, 나는 이 일을 할 수 있었다.item.<name> 슬롯. 이 슬롯은 나에게 a를 돌려줄 것이다.item. 객체를 기준으로 ID 배열을 작성했다.id그리고 불렀다.indexOf(item.id)인덱스 위치를 얻기 위해서.

여기에 코드펜.

---

뷔에티파이 1.x

각 소품 개체에는 두 개의 키가 포함되어 있으며,item그리고index을 통해 각 항목에 대한 인덱스에 액세스할 수 있다.props.index. 새 헤더를 추가하는 것은 헤더 배열에 새 항목을 추가하는 것만큼 쉽다.

여기 예를 들어 코데펜이 있다.데이터 테이블의 첫 번째 열을 인덱스 위치로 변경한다.

https://codepen.io/potatogopher/pen/eGBpVp

사용할 수 있는 또 다른 접근법은 계산된 속성을 사용하여 데이터의 각 요소에 색인을 삽입하는 것이다.이는 계산된 속성이 자동으로 업데이트되므로 나중에 표를 업데이트해야 하는 경우에 유용할 수 있다.

예를 들어, 항목 데이터가 다음 위치에 저장되어 있다고 가정하십시오.items.

data() {
  return {
    items: [{
      fruit_name: 'Banana',
      calories: 30
    }, {
      fruit_name: 'Apples',
      calories: 40
    }]
  }
}

여기서, 모든 요소는 그 자체와 추가 속성, 즉.index. 스프레드 오퍼레이터를 사용하여 요소 첨가를 달성한다.모든 매핑된 요소들은 기능 프로그래밍 방식을 사용하여 단일 배열로 결합된다.

computed: {
  itemsWithIndex: () {
    return this.items.map(
      (items, index) => ({
        ...items,
        index: index + 1
      }))
  }
}

참고:index: index+1번호 매기는 1부터 시작할 것이다.

그런 다음, 머리글 내부 데이터가 필요한 데이터v-data-table, 참조할 수 있다.index번호 매기기 위한 항목 데이터.

data() {
  return {
    items: {
      ...
    },
    headers: [{
        text: 'Num',
        value: 'index',
      },
      {
        text: 'Fruit Name',
        value: 'fruit_name',
      },
      {
        text: 'Calories',
        value: 'calories',
      }
    ]
  }
}

코드펜 예제: https://codepen.io/72ridwan/pen/NWPMxXp

Super simple , indexOf {{items.indexOf(props) 사용}}

다음을 사용할 수 있다.

{{props.index}}

<v-data-table
  :headers="dessertHeaders"
  :items="desserts"
  single-expand
  :expanded.sync="expanded"
  item-key="name"
  show-expand
  class="elevation-1"
>
  <template v-slot:item.sn="{ index }">
    {{ index + 1 }}
  </template>
</v-data-table>

어디에sn인덱스를 바꿀 헤더 입니다.

다음 스크린샷을 확인하십시오.

그냥 이렇게 하면 된다.

    <template #item.serialNo="{item}">
    <td >
    {{ArrayName.indexOf(item) + 1}}
    </td>
    </template>
    

ArrayName: ':items'에서 사용하는 어레이

serialNo: 열을 선택하는 값

이 샌드박스 덕분에 아래 코드를 사용하여 각 행에 인덱스를 표시할 수 있었다.

<v-data-table
  :headers="headers"
  :items="items"
>
  <template slot="item.rank" scope="props">
    {{ props.index + 1 }}
  </template>
</v-data-table>

머리글 섹션이 다음과 같은 경우:

headers: [
  { name: 'rank', value: 'rank' },
  // other headers
]

쉬운 피지 :)

<template>
    <v-data-table
          :headers="headers"
          :items="items"
          sort-by="calories"
          hide-default-footer
          class="elevation-1"
    >

        <template v-slot:item.count="{item, index}">
            {{index+1}}
        </template>

    </v-data-table>
</template>

<script>

export default {
    data: () => ({
    headers: [
      {
            text: "#",
            sortable: false,
            value: "count",
          },]
        })
}

</script>

참조URL: https://stackoverflow.com/questions/46380574/how-to-display-the-index-of-an-array-using-the-vuetify-data-table