《bootstrap-table-vue.js系列》(一) 入门

一、引入css

<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/4.6/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/table/bootstrap-table.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/icons-1.8.1/font/bootstrap-icons.css}">
<link rel="stylesheet" type="text/css" th:href="@{/lib/fortawesome/free/6.1.0/css/all.min.css}">

二、引入js

<script type="text/javascript" th:src="@{/lib/js/jquery-3.6.0.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap/4.6/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap/table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap/table/bootstrap-table-locale-all.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/js/vue.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap/table/bootstrap-table-vue.min.js}"></script>

三、html 代码

<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>

四、JavaScript代码 

<script type="text/javascript">
    $(function () {
        let vm = new Vue({
            el: '#table',
            components: {BootstrapTable},
            data: {
                idsDel: false,
                columns: [
                    {
                        field: 'state',
                        checkbox: true,
                    },
                    {
                        title: '用户ID',
                        field: 'userId'
                    },
                    {
                        field: 'userName',
                        title: '用户名'
                    },
                    {
                        field: 'operate',
                        maxWidth: "300",
                        title: '操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return $.button.operates(value, row, index);
                        },
                        events: {
                        }
                    }
                ],
                data: [],
                options: {
                    search: true,
                    showColumns: true,
                    locale: 'zh-CN',
                    toggle: "table",
                    toolbar: "#toolbar",
                    search: true,
                    showSearchButton: true,
                    searchHighlight: true,
                    showSearchClearButton: true,
                    showExport: true,
                    showRefresh: true,
                    height: "728",
                    pagination: true,
                    sidePagination: "server",
                    totalField: "count",
                    dataField: "data",
                    url: "/account/data.json",
                    onPostBody: function (res) {
                        console.log("onPostBody===>", res)
                    },
                    onLoadSuccess: function (res) {
                        console.log("onLoadSuccess===>", res)
                    }
                }
            },
            created: function () {
                this.$nextTick(function () {
                    console.log("created")
                })
            },
            methods: {
                add: function () {
                    console.log("add")
                },
                deletes: function () {
                    console.log("批量删除")
                }
            }
        })
    })
</script>

五、/account/data.json

{
	"count": 4,
	"code": 200,
	"msg": "succeed",
	"data": [{
		"userId": 10001,
		"userName": "深渊码头", 
	}, {
		"userId": 10002,
		"userName": "深渊码头啊", 
	}, {
		"userId": 10004,
		"userName": "星辰大海40"
	}, {
		"userId": 10018,
		"userName": "星辰大海123", 
	}]
}