《前端》bootstrapTable-Vue使用记录--2020年9月27日

引入文件：

    <script src="./lib/js/jquery-1.11.0.min.js"></script>
    <script src="./lib/js/bootstrap-3.3.7.min.js"></script>
    <script src="./lib/js/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table-vue.min.js"></script>
    <script src="./lib/js/vue-2.4.0.js"></script>

用法：（充分利用 mounted() {} ）

实现功能是在表格中添加按钮，实现触发事件并获取数据。

实现思路：

•  依旧是table标签，把table标签放到vue的div中

<div id="app">
    <table id="docDateTable" class="table table-hover table-bordered" style="color: #000000">
    </table>
</div>

• columns（存放table的表头）和data（存放table的数据）放在data里面。
• 在mounted() {}里写bootstrapTable，格式如下：

mounted() {
        this.$nextTick(() => {
            var $this = this
            $('#docDateTable').bootstrapTable({
                // 其他配置选项
                columns: this.columns,//在这里获取列和数据
                data: this.data,
            });

           // 写dom的触发方法

        })

    },

疑惑1：table里面方法怎么写进去？

在columns里面对应列中写formatter:function(value,row,index){

     // 在里面拼按钮字符串

}

这里有没有封装的方法？

疑惑2：table里面的按钮触发事件怎么写进去？

之前是拼接按钮的时候用onclick事件(如EditViewById（）):

result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"EditViewById('" + rowarr.name + '\',\'' + rowarr.cityname + '\',\'' + id + "')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";

现在不行，为什么不行？原理的东西还说不太出来、

解决：拼接按钮的时候，利用class或者id 用dom的方式写触发事件。（如红框）。

在 mounted() {} 里面bootstrapTable定义后面写触发方法。

           $(".operateBtn").on('click', function(value, row, index) {

                console.log($(this).attr('data-id'));

                alert($(this).attr('index'))

            })

疑惑3：怎么传值，获取table中的数据。

如黄圈中，通过属性值赋值的方式传值，在方法中通过 $(this).attr('data-id') 获取值。

完整代码示例：

var vm = new Vue({
    el: '#app',
    data: {
        columns: [{
            field: 'name',
            title: '工作令',
        }, {
            field: 'bl',
            title: '备料号',
        }, {
            field: 'operate',
            title: '操作',
            valign: 'middle',
            // formatter: actionFormatter,
            formatter: function(value, row, index) {
                // console.log("这一条记录:" + JSON.stringify(row))
                // console.log("姓名:" + row.name)
                // console.log("所在城市:" + row.cityname)
                var result = "";
                // result += "<button>确定</button>"
                result += "<a href='javascript:;' class='btn btn-xs green operateBtn' index='" + index + "' data-id='" + row.bl + "' title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                return result;
            },
        }],
        data: [{
            "name": "mary",
            "bl": "2324345",
            "XHpici": "女",
            "planPerson": "职称",
            "planNum": "riq",
            "taskName": "citynamedwd",
            "taskPerson": "Item 20",
            "qualityLevel": "$353450",
            "totalDemand": "女",
            "allocatedQuantity": "职称",
        }, {
            "name": "belle",
            "bl": "54534656",
            "XHpici": "",
            "planPerson": "佛山市",
            "planNum": "放的歌",
            "taskName": "vagrant",
            "taskPerson": "分阿尔法",
            "qualityLevel": "33353450",
            "totalDemand": "333",
            "allocatedQuantity": "发发火",
        }],
    },
    watch: {},
    mounted() {
        this.$nextTick(() => {
            var $this = this
            $('#docDateTable').bootstrapTable({
                // url: queryUrl, //请求后台的URL（*）
                method: 'GET', //请求方式（*）
                sortable: false, //是否启用排序
                sortOrder: "asc", //排序方式
                singleSelect: true, //开启单选,想要获取被选中的行数据必须要有该参数
                clickToSelect: true, //是否启用点击选中行
                /* height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 */
                showColumns: true, //是否显示所有的列
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 5, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                //得到查询的参数
                queryParams: function(params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    var query_params = {
                        rows: params.limit, //页面大小
                        page: (params.offset / params.limit) + 1, //页码
                        sort: params.sort, //排序列名
                        sortOrder: params.order, //排位命令（desc，asc）

                        //查询框中的参数传递给后台
                        search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数
                    };
                    return query_params;
                },
                columns: this.columns,
                data: this.data,
            });
            $(".operateBtn").on('click', function(value, row, index) {
                // console.log($(this))
                console.log($(this).attr('data-id'));
                alert($(this).attr('index'))
            })
        })

    },
    methods: {},
});