vue子组件使用父组件样式_可使用引导样式将可排序和可搜索的表作为Vue2组件

vue子组件使用父组件样式

vue2-bootstrap-table (vue2-bootstrap-table)

vue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js.

vue-bootstrap-table是可排序且可搜索的表，具有Bootstrap样式，适用于Vue.js。

View Documentation 查看文档 Download Source 下载源

特征 (Features)

• Sortable

  可排序

• Multicolumn Sorting

  多列排序

• Searchable

  可搜寻

• Select display columns

  选择显示列

• Pagination

  分页

• On Table Editing

  在表格上编辑

• Remote data loading

  远程数据加载

• Remote data processing

  远程数据处理

要求 (Requirements)

• Vue 2.* (tested with 2.3.3)

  Vue 2。*(已通过2.3.3测试)

• Bootstrap 3 css

  Bootstrap 3 CSS

安装 (Installation)

Install the vue-bootstrap-table package package using npm:

使用npm安装vue-bootstrap-table 软件包 ：

npm install vue2-bootstrap-table2

Or add the js script to your html (download from releases):

或将js脚本添加到html中(从releases下载)：

<script src="vue-bootstrap-table.js"></script>

用法 (Usage)

new Vue({
        el: '#app',
        components: {
            VueBootstrapTable: VueBootstrapTable
        },
        data: {
            columns: [
                {
                    title:"id",
                },
                {
                    title:"name",
                    visible: true,
                    editable: true,
                },
                {
                    title:"age",
                    visible: true,
                    editable: true,
                },
                {
                    title:"country",
                    visible: true,
                    editable: true,
                }
            ],
            values: [
                {
                    "id": 1,
                    "name": "John",
                    "country": "UK",
                    "age": 25,
                },
                {
                    "id": 2,
                    "name": "Mary",
                    "country": "France",
                    "age": 30,
                },
                {
                    "id": 3,
                    "name": "Ana",
                    "country": "Portugal",
                    "age": 20,
                }
            ]
        },
    });

<vue-bootstrap-table
            :columns="columns"
            :values="values"
            :show-filter="true"
            :show-column-picker="true"
            :sortable="true"
            :paginated="true"
            :multi-column-sortable=true
            :filter-case-sensitive=false

    >
    </vue-bootstrap-table>

配置道具 (Configuration Props)

props: {
        /**
         * The column titles, required
         */
        columns: {
            type: Array,
            required: true,
        },
        /**
         * The rows, an Array of objects
         */
        values: {
            type: Array,
            required: true,
        },
        /**
         * Enable/disable table sorting, optional, default true
         */
        sortable: {
            type: Boolean,
            required: false,
            default: true,
        },
        /**
         * Enable/disable table multicolumn sorting, optional, default false.
         * Also sortable must be enabled for this function to work.
         */
        multiColumnSortable: {
            type: Boolean,
            required: false,
            default: false,
        },
        /**
         * Enable/disable input filter, optional, default false
         */
        showFilter: {
            type: Boolean,
            required: false,
            default: false,
        },
        /**
         * Define if Filter search field is to work in a case Sensitive way. Default: true
         */
        filterCaseSensitive: {
            type: Boolean,
            required: false,
            default: true,
        },
        /**
         * Enable/disable column picker to show/hide table columns, optional, default false
         */
        showColumnPicker: {
            type: Boolean,
            required: false,
            default: false,
        },
        /**
         * Enable/disable pagination for the table, optional, default false
         */
        paginated: {
            type: Boolean,
            required: false,
            default: false,
        },
        /**
         * If pagination is enabled defining the page size, optional, default 10
         */
        pageSize: {
            type: Number,
            required: false,
            default: 10,
        },
        /**
         * Setting default order column. Expected name of the column
         */
        defaultOrderColumn: {
            type: String,
            required: false,
            default: null,
        },
        /**
         * Setting default order direction. Boolean: true = ASC , false = DESC
         */
        defaultOrderDirection: {
            type: Boolean,
            required: false,
            default: true,
        },
        /**
         * If loading of table is to be done through ajax, then this object must be set
         */
        ajax: {
            type: Object,
            required: false,
            default: function () {
                return {
                    enabled: false,
                    url: "",
                    method: "GET",
                    delegate: false,
                    axiosConfig: {}
                }
            }
        },
        /**
         * Function to handle row clicks
         */
        rowClickHandler: {
            type: Function,
            required: false,
            default: function () {}
        },
    },

列阵列定义 (Column Array Definition)

The columns array takes object of type:

columns数组采用以下类型的对象：

{
    title: String,              // Mandatory: Title to be presented on the Table
    name: String,               // Optional: The name of the "data" property. If nothing, title is used.
    visible: Boolean,              // Optional: column visible? (Default: true)
    editable: Boolean,            // Optional: column cells editable? (Default: false)
    columnstyle: String         // Optional: styles to be applied to the Column Header
    cellstyle: String           // Optional: styles to be applied to the Cells of this column
    renderfunction: Function    // Optional: Function that receives as input the column name and entry, and returns an HTML String for drawing cell
}

列定义示例 (Column Definition Examples)

Column with Title "Id" , which is visible but not editable:

标题为“ Id”的列，该列可见但不可编辑：

{
    title:"Id",
}

Column with Title "Name" , which is visible and editable:

标题为“名称”的列，该列可见且可编辑：

{
    title:"Name",
    visible: true,
    editable: true,
}

渲染功能示例 (Render Function Example)

For a Column definition like so:

对于像这样的列定义：

columns: [
    {
        title: "Test",
        visible: true,
        renderfunction: renderTestColumn
    }
],

There must be a javascript function called renderTestColumn :

必须有一个名为renderTestColumn的javascript函数：

<script>
    var renderTestColumn = function (colname, entry) {
        return '<div class="btn-group" role="group" >'+
            '  <button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>'+
            '  <button type="button" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>'+
            '</div><span>'+JSON.stringify(entry)+'</span>';
    };
</script>

ROW Click处理程序 (ROW Click Handler)

To add a Row click handler function:

要添加行单击处理程序功能：

<vue-bootstrap-table
            [...]
            :row-click-handler=handleRowFunction
    >
    </vue-bootstrap-table>

On your Vue instance :

在您的Vue实例上：

data: {
        handleRowFunction: handleRow,
}

And have the javascript function declared like so:

并声明如下的javascript函数：

var handleRow = function (event, entry) {
    console.log("CLICK ROW: " + JSON.stringify(entry));
};

Where event in the MouseEvent and entry e the complete entry corresponding to the row.

MouseEvent中的where事件和entry e对应于该行的完整条目。

默认订购 (DEFAULT Ordering)

To setup your default ordering for the table:

设置表格的默认顺序：

<vue-bootstrap-table
            [...]
            :default-order-column="columnToSortBy"
            :default-order-direction=true
    >
    </vue-bootstrap-table>

On your Vue instance :

在您的Vue实例上：

data: {
        columnToSortBy: "name",
}

This will make the default column order be :

这将使默认列顺序为：

• column: name

  栏：名称

• order: ascending

  顺序：升序

AJAX配置 (AJAX Configuration)

Ajax Object properties:

Ajax对象属性：

• enabled : to enable loading through ajax call, enable this

  enabled：要启用通过ajax调用加载，请启用此功能

• url: the URL where to request the data

  url：请求数据的URL

• methods: GET and POST are the valid methods allowed

  方法：GET和POST是允许的有效方法

• delegate: False = just get all the data and do processing on browser; True = Ask for data as needed, and all processing is done on the server side.

  委托：False =仅获取所有数据并在浏览器上进行处理； True =根据需要请求数据，并且所有处理都在服务器端完成。

• axiosConfig: check Axios Page for information regarding Method Config.

  axiosConfig：检查Axios页面以获取有关方法配置的信息。

用于远程加载的示例AJAX配置 (Example AJAX config for Remote Loading)

This configuration will only make one request to the server, to get all the data and load it straight into the browser.

这种配置只会向服务器发出一个请求，以获取所有数据并将其直接加载到浏览器中。

ajax: {
    enabled: true,
    url: "http://localhost:9430/data/test",
    method: "GET",
    delegate: false,
    axiosConfig: {}
},

用于远程处理的示例AJAX配置 (Example AJAX config for Remote Processing)

This configuration will only make many requests to the server, each time data ir needed, or any processing is required: for filtering, ordering, pagniation, changes of page size, etc.

每次需要数据或进行任何处理时，此配置只会向服务器发出许多请求：过滤，排序，分页，更改页面大小等。

ajax: {
    enabled: true,
    url: "http://localhost:9430/data/test",
    method: "GET",
    delegate: true,
    axiosConfig: {
        headers: {
            'Authorization': 'Bearer TESTTESTTESTTESTTEST'
        }
    }
},

Ajax请求和预期响应 (Ajax Request and Expected Response)

发送的Ajax请求参数 (Ajax Request Parameters Sent)

When Ajax is enabled, the following parameters are sent with each request for the URL specified:

启用Ajax时，每个对指定URL的请求都将发送以下参数：

• sortcol : Array of String columns to sort (only sent when delegate is true, otherwise will be null)

  sortcol ：要排序的String列的数组(仅在delegate为true时发送，否则为null)

• sortdir : Array of sorting directions for each column on sortcol, "ASC" or "DESC" (only sent when delegate is true, otherwise will be null)

  sortdir ：sortcol，“ ASC”或“ DESC”上每列的排序方向数组(仅在delegate为true时发送，否则为null)

• filter : The filter to be used (only sent when delegate is true, otherwise will be null)

  filter ：要使用的过滤器(仅在delegate为true时发送，否则为null)

• page : The number of the page being requested ( when delegate is false, it will always be 1 )

  page ：所请求的页面号(如果委托为假，则始终为1)

• pagesize : The number of records being requested.

  pagesize ：请求的记录数。

• echo : A unique number for the request.

  echo ：请求的唯一编号。

使用GET时 (When using GET)

• sortcol : is sent in the following format sortcol[]=COLNAME&sortcol[]=COLNAME

  sortcol ：以以下格式发送sortcol[]=COLNAME&sortcol[]=COLNAME

• sortdir : is sent in the following format sortdir[]=ASC&sortdir[]=DESC

  sortdir ：以以下格式发送： sortdir[]=ASC&sortdir[]=DESC

This is performed automatically by AXIOS

这是由AXIOS自动执行的

使用POST时 (When using POST)

• sortcol : is sent in the following format sortcol[0]=COLNAME ; sortcol[1]=COLNAME;

  sortcol ：以以下格式发送sortcol[0]=COLNAME ; sortcol[1]=COLNAME; sortcol[0]=COLNAME ; sortcol[1]=COLNAME;

• sortdir : is sent in the following format sortdir[0]=ASC ; sortdir[1]=DESC

  sortdir ：以以下格式发送sortdir[0]=ASC ; sortdir[1]=DESC sortdir[0]=ASC ; sortdir[1]=DESC

This is performed automatically by AXIOS

这是由AXIOS自动执行的

Ajax预期响应 (Ajax Expected Response)

For all requests, vue-bootstrap-table expects an object of the following type:

对于所有请求，vue-bootstrap-table都需要以下类型的对象：

{
    echo: INTEGER,
    filtered: INTEGER,
    data: [OBJECT],
},

Where:

哪里：

• echo : is the same integer the request provided.

  echo ：与请求提供的整数相同。

• filtered : is the total amount of entries for the request, and is used for pagination

  filtered ：是请求条目的总数，用于分页

• data : is an Array of Object with the entries.

  data ：是包含条目的对象数组。

Example:

例：

{
    echo: 1,
    filtered: 2000,
    data: [
        {
            id: 1,
            name: "Rui"
        },
        {
            id: 2,
            name: "Gustavo"
        },
    ],
},

大事记 (Events)

• cellDataModifiedEvent - When a cell is edited, an cellDataModifiedEvent event is dispatched.

  cellDataModifiedEvent编辑单元格时，将调度cellDataModifiedEvent事件。

• ajaxLoadedEvent - When ajax call is executed successfully an ajaxLoadedEvent event is dispatched.

  ajaxLoadedEvent成功执行ajax调用后，将调度ajaxLoadedEvent事件。

• ajaxLoadingError -When ajax call is executed unsuccessfully an ajaxLoadingError event is dispatched.

  ajaxLoadingError当ajax调用执行失败时，将调度ajaxLoadingError事件。

处理事件 (Handling Events)

created: function () {
        this.$on('cellDataModifiedEvent',
            function( originalValue, newValue, columnTitle, entry) {
                console.log("cellDataModifiedEvent - Original Value : " + originalValue +
                                         " | New Value : " + newValue +
                                         " | Column : " + columnTitle +
                                         " | Complete Entry : " +  entry );
            }
        );
        this.$on('ajaxLoadedEvent',
            function( data ) {
                console.log("ajaxLoadedEvent - data : " + data );
            }
        );
        this.$on('ajaxLoadingError',
            function( error ) {
                console.log("ajaxLoadingError - error : " + error );
            }
        );
    },

有助于 (Contribute)

If you have a feature request, please add it as an issue or make a pull request.

如果您有功能请求，请将其添加为问题或提出拉取请求。

待办事项清单 (TODO List)

• [x] Basic table

  [x]基本表格

• [x] Sorting

  [x]排序

• [x] Multicolumn Sorting

  [x]多列排序

• [x] Filter

  [x]筛选器

• [x] Column picker

  [x]列选择器

• [x] Pagination

  [x]分页

• [x] Editing

  [x]编辑

• [x] Ajax

  [x]阿贾克斯

• [ ] Responsive

  []React灵敏

• [ ] Dates sorting

  []日期排序

• [ ] Keyboard navigation

  []键盘导航

翻译自: https://vuejsexamples.com/a-sortable-and-searchable-table-as-a-vue2-component-using-bootstrap-styling/

vue子组件使用父组件样式