代码之家  ›  专栏  ›  技术社区  ›  Billal Begueradj

Vuetify:如何从数据表组件中删除这个特定的prop内容?

  •  1
  • Billal Begueradj  · 技术社区  · 6 年前

    在Vuetify中,当我使用数据表组件时,默认情况下我通过道具显示一堆信息,我成功地去除了它们(例如上一个和下一个图标),但是我无法去除此处显示的两行下面的文本:

    enter image description here

    (我是认真的 文本)

    这是密码( Codepen live demo ):

    <div id="app">
      <v-app id="inspire">
        <v-data-table
          :headers="headers"
          :items="desserts"
          v-model="selected"
          item-key="name"
          select-all
          class="elevation-1"
          rows-per-page-items=2
          prev-icon=false
          next-icon=false
        >
          <template slot="headerCell" slot-scope="props">
            <v-tooltip bottom>
              <span slot="activator">
                {{ props.header.text }}
              </span>
              <span>
                {{ props.header.text }}
              </span>
            </v-tooltip>
          </template>
          <template slot="items" slot-scope="props">
            <td>
              <v-checkbox
                v-model="props.selected"
                primary
                hide-details
              ></v-checkbox>
            </td>
            <td>{{ props.item.name }}</td>
            <td class="text-xs-right">{{ props.item.calories }}</td>
            <td class="text-xs-right">{{ props.item.fat }}</td>
            <td class="text-xs-right">{{ props.item.carbs }}</td>      
          </template>
        </v-data-table>
      </v-app>
    </div>
    
    2 回复  |  直到 6 年前
        1
  •  0
  •   Billal Begueradj    6 年前

    我找到了答案,我不得不加上:

    <template slot="pageText" slot-scope="props">
    </template>
    

    我是说如果你在 <template> 标签将显示在表格下方。在我的情况下,我没有放任何文本,所以没有显示任何内容。希望这对以后的其他人有帮助。

        2
  •  0
  •   Billal Begueradj    6 年前

    hide-actions 道具如下:

    <v-data-table
      hide-actions
    >
     <!-- Rest of components -->
    </v-data-table>