使Bootstrap-Vue B表“ Id”列不可见

时间:2018-07-26 14:45:29

标签: twitter-bootstrap vuejs2 bootstrap-4 bootstrap-vue

我在数据中有一个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表行数据上下文来做我想要的事情?

3 个答案:

答案 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中。

请参阅:https://getbootstrap.com/docs/4.1/utilities/display/

答案 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]