使 bootstrap-vue b-table 'Id' 列不可见
Posted
技术标签:
【中文标题】使 bootstrap-vue b-table \'Id\' 列不可见【英文标题】:Make bootstrap-vue b-table 'Id' column invisible使 bootstrap-vue b-table 'Id' 列不可见 【发布时间】:2019-01-03 14:48:50 【问题描述】:我在数据中有一个 bootstrap-vue 表 (b-table),我想让它的 '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 表行数据上下文来执行我想要的操作?
【问题讨论】:
【参考方案1】:您需要做的就是不将它包含在fields
定义中。项目行数据仍然存在,并且可以通过其他字段的作用域插槽访问。
无需使用 CSS 类来隐藏列。
通过另一个域范围的槽(比如LastName
槽)访问值:
<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>
【讨论】:
【参考方案2】:我的快速解决方案是这样的:
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'。
【讨论】:
根据@James A Mohler 的建议编辑了答案,使用 d-none 肯定要好得多,但想法还是一样的。【参考方案3】:这类似于拉托维奇的回答,但使用.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/
【讨论】:
以上是关于使 bootstrap-vue b-table 'Id' 列不可见的主要内容,如果未能解决你的问题,请参考以下文章
b-table 中的复选框的 bootstrap-vue 问题
Bootstrap-vue b-table:如何为非活动行设置 css-Class?
Bootstrap-Vue:将角色权限实现为多个 b-form-checkbox 数组,在 b-table 中显示为列。不工作