bootstrap-vue 表点击操作

Posted 2023-02-22

【中文标题】bootstrap-vue 表点击操作

【英文标题】：boostrap-vue table action on click

【发布时间】：2020-02-05 01:15:17

【问题描述】：

我在 Vue.js 中有一个包含数据的表格，我想在最后一个单元格中添加一些“动作点击”。

About boostrap-table

这是我的表格模板：

<BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"  v-if="table.ready">

还有数据：

this.table = 
   ready: false,
   columns: [
               
                field: 'id',
                title: 'id',
                visible: true
               ,
                
                field: 'test',
                title: 'test',
                visible: true,
                formatter: addClicks(this)
               ,
               ...
  ]

[编辑]

我想要这样的东西，但很明显，这不是渲染的：

...
formatter: function (value, row) 
   const ve = "<span @click='setElement("+row.id+")' class='btn btn-success btn-sm'>Set</span>";
   return ve;

我应该怎么做才能在点击时执行我的操作？

【问题讨论】：

clickcell 事件的行名和字段名可以分别与行索引和列索引匹配 (bootstrap-table.com/docs/api/events/#onclickcell)。也许您可以使用它来检测单击的单元格是否是最后一个。

感谢这可行，但我更喜欢 vue 风格的动作，就像我在帖子中添加的编辑一样。

你可以用“vue风格”注册事件。只需使用 @clickcell="yourHandler 在 BootstrapTable 元素中注册操作。手动创建元素是 Vue 的反模式，因为您没有利用模板。

是的，是的。这是一个临时解决方案。谢谢

【参考方案1】：

您可以从 bootstrap-vue 表中触发 OnClickCell 事件

事件：onClickCell jQuery 事件：click-cell.bs.table

参数：字段、值、行、$元素

详情：

当用户点击单元格时触发，参数包含：

field：被点击单元格对应的字段名。 value：点击单元格对应的数据值。 row：被点击的行对应的记录。 $element：td 元素。

【讨论】：

谢谢，我现在要使用@onClickCell="cellclick"。