vue.js 在v-data-表格标题中添加图标/按钮

eoigrqb6 于 2023-03-03 发布在 Vue.js

关注(0)|答案(1)|浏览(179)

我有一个用例，我想在每个标题小按钮，除了行动标题。图标按钮是相同的所有标题。我的代码看起来像这样：

<v-data-table
          :headers="tableHeaders"
          :items="items"
          :hide-default-footer="true"
          disable-pagination
          ref="table"
        >
          <template v-slot:header="{ props }">
            
              <th v-for="h in props.headers" :key="h.value">
                <v-btn v-if="h.text !== 'Actions'" icon small class="ml-2">
                  <v-icon small>{{ myicon }}</v-icon>
                </v-btn>
              </th>

          </template>
</v-data-table

我所面临的问题是，它创建图标从标题分开。我已经附上图片x1c 0d1x
如何调整代码，使图标位于标题文本之后/之前

vue.js

来源：https://stackoverflow.com/questions/75599226/add-icon-button-in-v-data-table-header

1条答案

按热度按时间

4xrmg8kj1#

你的代码应该工作正常，唯一的事情是列标题文本应该在你的唯一（在你的代码是失踪）.
现场演示**：**

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        value: 'name',
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' },
    ],
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%',
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%',
      },
      {
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: '8%',
      },
      {
        name: 'Gingerbread',
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: '16%',
      },
      {
        name: 'Jelly bean',
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: '0%',
      },
      {
        name: 'Lollipop',
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: '2%',
      },
      {
        name: 'Honeycomb',
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: '45%',
      },
      {
        name: 'Donut',
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: '22%',
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: '6%',
      },
    ],
  }),
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.25/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.2.25/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/>

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
      hide-default-header
    >
      <template v-slot:header="{ props }">
        <th v-for="head in props.headers">
          {{ head.text.toUpperCase() }}
          <v-icon>mdi-domain</v-icon>
        </th>
      </template>
    </v-data-table>
  </v-app>
</div>

赞(0）回复(0）举报 2023-03-03

我来回答

vue.js 在v-data-表格标题中添加图标/按钮

1条答案

相关问题

热门标签

最新问答