Trying to create a v-autocomplete dropdown with a table format. For example I have a select with a list of products each one with product name, keywords, prefix etc... want to be able to display this info as table on a dropdown. I was able to get the header working but then when I use a template for the items using
<v-autocomplete
dense
label="Select product"
:items="products"
:item-value="product_name"
:filter="customFilter"
:return-object="true"
v-model="form.product">
<template slot="selection" slot-scope="{ item, selected }">
{{ item.product_name ? item.product_name : ""}}
</template>
<template v-slot:prepend-item>
<v-simple-table dense>
<thead>
<tr>
<th>Full Name</th><th>Short Name</th><th>Prefix</th><th>Keywords</th>
</tr>
</thead>
</v-simple-table>
</template>
<template slot="item" slot-scope="{item}">
<v-simple-table>
<tbody>
<tr>
<td>{{ item.product_name }} </td><td>{{ item.product }}</td><td>{{ item.view_prefix }}</td><td>{{ item.keywords }}</td>
</tr>
</tbody>
</v-simple-table>
</template>
</v-autocomplete>
So this shows a perfect header but the data inside doesn't line up. The filter works fine and I can search for items on each column fine. Just want to be able to line up the header with the data properly. Let me know if anyone can help!
