问vue-bootstrap不能在sortable: true中进行排序
EN

Stack Overflow用户

提问于 2020-04-06 11:18:15

回答 1查看 29关注 0票数 0

我对bootstrap-vue是新手。在排序时有麻烦。我尝试使一些字段sortable: true，之后我可以在我的html文档中看到排序图标，但排序不起作用。有谁可以帮我？为什么会这样呢？

下面是我的代码：

    <div id="table" style="width: 80%; margin: auto;">
        <b-table :items="items" :fields="fields" class="table table-bordered">
        </b-table>
    </div>
    <script>
                let table_items = function(data) {
                    let items = [];
                    for (let i = 0; i < data.length; i++) {
                        item = {
                            tag: data[i]['tag'],
                            status: data[i]['status'],
                            account: data[i]['account'],
                            device: data[i]['device'],
                            active_request: data[i]['active_request'],
                            internet: String(data[i]['internet']),
                            requests: data[i]['statistic']['requests'],
                            succeed: data[i]['statistic']['succeed'],
                            failed: data[i]['statistic']['failed'],
                            empty: data[i]['statistic']['empty'],
                            services: data[i]['services'],
                            error: data[i]['health_check_error']
                        };
                        items.push(item);
                    }
                    return items;
                }
                    window.app = new Vue({
                        el: '#table',
                        data() {
                            return {
                                items: table_items,
                                fields: [{key: 'open_services', label: ''},
                                        {key: 'tag', label: 'Tag', sortable: true},
                                        {key: 'status', label: 'Status'},
                                        {key: 'account', label: 'Account'},
                                        {key: 'device', label: 'Device'},
                                        {key: 'active_request', label: 'Active request'},
                                        {key: 'internet', label: 'Internet'},
                                        {key: 'requests', label: 'Requests'},
                                        {key: 'succeed', label: 'Succeed'},
                                        {key: 'failed', label: 'Failed'},
                                        {key: 'empty', label: 'Empty'}],
                                service_fields: [{key: 'name', label: 'Service name'},
                                                 {key: 'status', label: 'Status'},
                                                 {key: 'potential', label: 'Potential'},
                                                 {key: 'target_types', label: 'Target types'},
                                                 {key: 'limits', label: 'Limits'},
                                                 {key: 'requests', label: 'Requests'},
                                                 {key: 'succeed', label: 'Succeed'},
                                                 {key: 'failed', label: 'Failed'},
                                                 {key: 'empty', label: 'Empty'}]
                        }}   
                })