《bootstrap-table-vue.js系列》(二) 方法的使用

一、原 bootstrap-table 的操作

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

1) bootstrap-table Html代码

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 ) 实例代码

    

        
             添加
        
        
             批量删除
        
    
    

 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;
                            }
                        }
                    )
                }
            }
        })