时间戳

首页 > 解决方案 > vuetify 数据表在 th 上插入输入

vuetify.js - vuetify 数据表在 th 上插入输入

问题描述

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

 <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>

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

标签： vuetify.js

解决方案

您上面的代码正在运行，您可以在开发人员控制台中进行调试，该组件放置在标题行旁边但仅在第一列中，要查看您的输入字段，您可以在输入字段中添加标签属性

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

请找到以下代码：

<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%',
        },
      ],
    }
  },
})

请在此处找到工作的 codepen：https ://codepen.io/chansv/pen/BapLMyV?editors=1010

推荐阅读