vue表格组件_一个简单的Vue组件来显示表格

vue表格组件

VUE表组件 (vue-table-component)

A simple Vue component to display tables. Support sortable columns, pagination and custom css styles.

一个简单的Vue组件来显示表格。 支持可排序的列，分页和自定义CSS样式。

Example with 2 Table components, first one with default styles and paginator, and second one with custom css styles and paginator in 'select' mode.

具有2个表组件的示例，第一个具有默认样式和分页器，第二个具有自定义css样式和分页器(在“选择”模式下)。

用法 (Usage)

<TableView
    :headers="[
      {"label":"First Name", "field":"first_name", "sortable":true, "type":"String"},
      {"label":"Email", "field":"email", "sortable":true, "type":"String"},
      {"label":"Age", "field":"age", "sortable":true, "type":"Number"}
    ]",
    :rows="[
      {"first_name":"Isidor" ,"email":"[email protected]", "age":20},
      {"first_name":"Max", "email":"[email protected]", "age":32},
      {"first_name":"Brigham", "email":"[email protected]", "age":54},
      {"first_name":"Jakob", "email":"[email protected]", "age":37},
      {"first_name":"Brannon" ,"email":"[email protected]", "age":18}
    ]",      
    :sort="{
      field: 'first_name',
      order: 'asc'
    }",
    :pagination="{
      itemsPerPage: 10,
      align: 'center',
      visualStyle: 'select'
    }",
    css-style="my-css-style"
  >
    <template v-slot:items="{ row }">
      <td>{{ row.first_name }}</td>  
      <td>{{ row.email }}</td>              
      <td>{{ row.age }}</td>            
    </template>
    <template v-slot:no-data>
      <span>No data</span>
    </template>
  </TableView>

道具 (Props)

• headers: (required) array with table columns definition (See columns definition)

  headers ：(必需)具有表列定义的数组(请参阅列定义)

• rows: (required) array with data to fill the table

  rows ：(必填)包含数据的数组，用于填充表

• sort: object with sorting configuration

  sort ：具有排序配置的对象

  • field: initial sort fieldfield ：初始排序字段
  • order: [asc/desc] sort orderorder ：[asc / desc]排序顺序

• pagination: object with pagination configuration

  pagination ：具有分页配置的对象

  • enabled: [true/false]已启用 ：[true / false]
  • itemsPerPage: number of rows in each pageitemsPerPage ：每页中的行数
  • align: [left/center/right] position of the paginator (Default 'right')align ：分页器的[left / center / right]位置(默认为'right')
  • visualStyle: [select/button] paginator style (Default 'button')visualStyle ：[选择/按钮]分页器样式(默认为“按钮”)

• css-style: css class that will be applied to the component instead of default styles. Custom styles must be defined in this way:

  css-style ：将应用于组件而不是默认样式的css类。 自定义样式必须以这种方式定义：

<style lang="scss">
.my-css-style{
    .ozn-table {
        ...
    }
    .ozn-paginator {
        ...
    }
}
</style>

列定义 (Columns definition)

Each column must be defined with 4 parameters:

每列必须使用4个参数定义：

• label: text that will be shown in the column header

  label ：将在列标题中显示的文本

• field: data field related to the column

  field ：与列相关的数据字段

• sortable: [true/false]

  可排序 ：[是/否]

• type: [String/Number]

  类型 ：[字符串/数字]

翻译自: https://vuejsexamples.com/a-simple-vue-component-to-display-tables/

vue表格组件