我正在尝试将（+）图标添加到v-datable中的一个标题列。下面的代码不添加任何图标。实际上，为表头创建模板槽对数据表没有任何影响。
我所尝试的，
<template>
<v-data-table
item-key="name"
:items="complainantInfos"
:headers="headers"
sort-by="Id"
class="elevation-1">
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Inspection</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
</template>
<template slot="headers" slot-scope="props">
<tr>
<th
v-for="header in props.headers"
:key="header.text">
<v-icon small >plus-circle-outline</v-icon>
{{ header.text }}
</th>
</tr>
</template>
</v-data-table>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data(){
return{
complainantInfos:[
{
...
}
],
headers: [
{ text: 'NameSurname', value: 'name', align: 'left' ,width: "25%" },
{ text: 'ID', value: 'PersonelIdNumber' },
{ text: 'Phone-1', value: 'Cellular1' },
{ text: 'Phone-2', value: 'Cellular2' },
{ text: 'Work Phone', value: 'WorkPhone' },
{ text: 'InterPhone', value: 'Interphone' },
{ text: 'Email', value: 'Email' },
//{ text: '+', value: 'action', sortable: false, align: 'right'}
],字符串
我已经根据注解编辑了代码。问题解决了。
...
</v-card>
</v-form>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:header.Actions="{ header }">
<v-icon small>plus-circle-outline</v-icon>{{ header.text }}
</template>
...型
2条答案
按热度按时间zhte4eai1#
由于您只希望将图标添加到一个特定的列，我建议使用header.columnName。
您的插槽看起来像这样：
字符串
如果列名为“Cellular1”，则代码将为
<template v-slot:header.Cellular1="{ header }">。请确保您有图标集包括在内。否则，不会为
v-icon呈现HTML。你可以用默认的mdi图标来测试它，例如mdi-minus。krcsximq2#
上面的代码没有被应用，所以我做了下面的事情。
字符串
你可以把你的头键放在名字里。