一、原 bootstrap-table 的操作

在原bootstrap-table的事件和方法中，需要定义如下方法监听

1) bootstrap-table Html代码

<table id="table"></table>

2) bootstrap-table JavaScript

 var $table = $('#table')
//刷新
$table.bootstrapTable('refresh')
//获取选中的数据
$table.bootstrapTable('getSelections')
//监听选中操作
$table.on('check.bs.table uncheck.bs.table check-all.bs.table
 uncheck-all.bs.table',
       function () {
            console.log(this)
       }
)

二、bootstrap-table-vue 操作

官网文档我也看了一遍，官方也没有给出详细信息，只是给了一个简简单单的vue实例，实则看着蛋疼。

本来还是想放弃了，还是使用bootstrap-table原有的方法操作，但是第二天夜晚就突然灵感就来了，就研究出来了

1( bootstrap-table-vue 实现监听和操作

let vm = new vue({
    //vue代码
})

1-1( 方案一

//刷新
vm.$refs.table.$table.bootstrapTable("refresh")

//获取选中的表格数据
vm.$refs.table.$table.bootstrapTable("getSelections")

1-2( 方案二

let _this = this

//刷新
_this.$refs.table.refresh()

//获取选中的表格数据
_this.$refs.table.getSelections()

但是方案二，有时候在一定地方是无效和满足的，比如如何监听选中?

解决方案：

1 ) 实例代码

<div class="container-fluid pt-3" id="table">

    <div id="toolbar">
        <a class="btn btn-primary" @click="add()">
            <i class="bi bi-plus-circle"></i> 添加
        </a>
        <a class="btn btn-danger" v-bind:class=" { 'disabled' :!idsDel}" @click="deletes()">
            <i class="bi bi-trash3-fill"></i> 批量删除
        </a>
    </div>
    <bootstrap-table ref="table" :columns="columns" :data="data" :options="options"></bootstrap-table>

</div>

 2 ) vue 代码

在 vue methods 里面 定义一个 bootstrapTableInit 函数，里面专门放 bootstrap-table-vue的监听代码，可以实现bootstrap-table-vue的监听

let vm = new Vue({
        el: '#table',
        components: {BootstrapTable},
        data: {
            idsDel: false,
            columns: [],
            data: [], 
            options: {},
            mounted: function () {
                this.$nextTick(function () { 
                    vm.bootstrapTableInit()
                })
            },
            methods: {
                bootstrapTable: function (val) {
                    return vm.$refs.table.$table.bootstrapTable(val);
                },
                deletes: function () {
                    console.log("批量删除")
                    console.log(this.bootstrapTable("getSelections"))
                },
                bootstrapTableInit() { 
                    let _this = this;
                    _this.$refs.table.$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table',
                        function () {
                            if (_this.$refs.table.getOptions().length == 0) {
                                _this.idsDel = false;
                            } else {
                                _this.idsDel = true;
                            }
                        }
                    )
                }
            }
        })