我在数据中有一个Bootstrap-Vue表(b表),我想为其提供一个'Id'值供以后的事件访问,但我想从表渲染中隐藏它。
我以为我看到了一种通过将'Id'绑定到row.key或row.index或某些此类b表属性的方法,但是我在任何地方都找不到。
因此,我将列值包括在字段定义中,但找不到隐藏该列的方法。
该表如下所示:
<b-table show-empty responsive striped hover small outlined :stacked="stack"
:items="DisplayViewData"
:fields="fields"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc">
<template slot="select" slot-scope="data">
<b-form-checkbox v-model="data.item.IsSelected"/>
</template>
</b-table>
,并且字段定义如下:
fields: Array<any> = [
{key: 'Id',},
{key: 'LastName', sortable: true},
{key: 'FirstName', sortable: true},
etc.....
];
但这意味着呈现Id列。
是否可以通过使“ Id”列不可见或将data.Id值分配给其他b表行数据上下文来做我想要的事情?
答案 0 :(得分:3)
我对此的快速解决方案是这样的:
fields: Array<any> = [
{key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
{key: 'LastName', sortable: true},
{key: 'FirstName', sortable: true},
etc.....
];
因此要使用ID,请使用 thClass:“ d-none”,tdClass:“ d-none” 。
答案 1 :(得分:1)
这类似于Latovic的回答,但使用.d-none
fields: Array<any> = [
{key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
{key: 'LastName', sortable: true},
{key: 'FirstName', sortable: true},
etc.....
];
您想使用.d-none
的原因是因为它已经内置在Bootstrap 4中。
答案 2 :(得分:0)
您需要做的就是 不包括 它在LastName
定义中。项目行数据仍将在那里,并且可以通过其他字段中的作用域插槽进行访问。
无需使用CSS类来隐藏列。
要通过其他字段作用域插槽(例如<b-table :fields-"fields" :items="items" ... >
<template slot="LastName" slot-scope="{ value, item }">
<!-- value is the field value -->
{{ value }}
<!-- item is the entire row object -->
<!--you can use it for actions on buttons, etc -->
<b-button @click="doSomthing(item.Id)">{{ item.Id }}</b-button>
</template>
</b-table>
插槽)访问值:
name[k-1]