vuetify data-table 在 th 上插入输入

Question

我正在尝试在数据 table 的所有元素上插入输入。

 <v-data-table :headers="headers" :items="desserts" item-key="name" show-select>
  <template v-slot:header> 
   <v-text-field hide-details="auto" flat solo class="float-input"></v-text-field>
  </template> 
 </v-data-table>

这是行不通的。我该如何修复代码？请帮忙

Answer 1

You above code is working, you can debug in developers console, the component is placed next to the headers row but only in the first column, to view your input filed you can add a label attribute to input field

如果要向每个 header 添加文本字段，则需要包含 props.headers 并在 header 插槽中循环

请找到以下代码：

<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="desserts" item-key="name" show-select>
  <template v-slot:header> 
   <v-text-field hide-details="auto" flat solo class="float-input" label="some input field in header slot"></v-text-field>
  </template> 
 </v-data-table>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          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%',
        },
      ],
    }
  },
})

请在此处找到可用的代码笔：https://codepen.io/chansv/pen/BapLMyV?editors=1010

vuetify data-table 在 th 上插入输入

vuetify data-table insert input on th

vuetify.js