vue轻量级弹幕组件
v-datatable-light (v-datatable-light)
A lightweight vue datatable component with no dependencies.
轻量级的vue数据表组件,没有依赖项。
用法 (Usage)
<DataTable
:header-fields="headerFields"
:data="data"
/>
import { DataTable } from 'v-datatable-light'
export default {
components: {
DataTable
}
}
数据表道具 (DataTable Props)
Field | Type | Required | default | Description |
---|
headerFields | array | true | null | Definition of each column of the table. In each item of this array you will define how this column will behave. |
data | array | true | null | Array of objects that will feed the datatable. |
isLoading | boolean | false | false | Flag to indicate to datatable if the data is loading. If it is, your spinner slot will be show. |
sortField | string | false | null | To indicate by which field the datatable is sorted for. |
sort | string | false | null | To indicate by which direction the databale is sorted for ('asc' or 'desc'). |
notFoundMsg | string | false | null | Message to by show when no data was found. |
trackBy | string | false | 'id' | An unique id column used for checkbox column type to compare if a field is checked or not. |
css | object | false | Structure | An object with attributes used to add css classes to DataTable internal elements. |
tableHeight | string | false | null | Used to have fixed header in the table. |
defaultColumnWidth | string | false | '150px' | Set the default column with, only used when 'tableHeight' prop is informed. |
领域 | 类型 | 需要 | 默认 | 描述 |
---|
headerFields | 数组 | 真正 | 空值 | 表的每一列的定义。 在此数组的每个项目中,您都将定义此列的行为。 |
数据 | 数组 | 真正 | 空值 | 将提供数据表的对象数组。 |
isLoading | 布尔值 | 假 | 假 | 指示数据表是否正在加载数据的标志。 如果是这样,将显示您的微调器插槽。 |
sortField | 串 | 假 | 空值 | 指示数据表是按哪个字段排序的。 |
分类 | 串 | 假 | 空值 | 指示数据包按哪个方向排序(“ asc”或“ desc”)。 |
notFoundMsg | 串 | 假 | 空值 | 找不到数据时显示的消息。 |
跟踪 | 串 | 假 | 'ID' | 用于复选框列类型的唯一ID列,用于比较是否选中了字段。 |
CSS | 目的 | 假 | 结构体 | 具有用于将CSS类添加到DataTable内部元素的属性的对象。 |
tableHeight | 串 | 假 | 空值 | 用于在表中具有固定的标题。 |
defaultColumnWidth | 串 | 假 | '150px' | 设置默认列,仅在通知'tableHeight'属性时使用。 |
Name | Type | Required | Default | Description |
---|
name | string | true | null | Attribute that the DataTable will try to retrieve the value from the data item. |
label | string | true | null | Attribute that the DataTable will show on the header for the column. |
sortable | boolean | false | false | Define if that column will be sortable or not. In case the value is true, two arrows will be show on the header. |
customElement | boolean | string | false | null |
format | function | false | null | A function used to format a value in each line of the DataTable's body. |
width | string | false | null | String used to define column width. Only used when 'tableHeight' props is informed. |
__slot:actions | string | false | null | Used to create a new column to be used for buttons or any kind of action. You have to inform the slot 'actions' and it will be rendered inside each line. In case you want to use more than one action in the same table, you can inform different IDs for each one, and this ID will be used as the slot ID. The format would be: __slot:actions:myActionID , in this case myActionID is the slot ID |
__slot:checkboxes | string | false | null | Used to create a column with a checkbox. Every time you check or uncheck an item an event is emited. |
名称 | 类型 | 需要 | 默认 | 描述 |
---|
名称 | 串 | 真正 | 空值 | DataTable将尝试从数据项中检索值的属性。 |
标签 | 串 | 真正 | 空值 | DataTable将在列标题上显示的属性。 |
可排序 | 布尔值 | 假 | 假 | 定义该列是否可排序。 如果该值为true,则标题上将显示两个箭头。 |
customElement | 布尔值 | 串 | 假 | 空值 |
格式 | 功能 | 假 | 空值 | 用于格式化DataTable主体各行中的值的函数。 |
宽度 | 串 | 假 | 空值 | 用于定义列宽的字符串。 仅在通知“ tableHeight”道具时使用。 |
__slot:actions | 串 | 假 | 空值 | 用于创建新列以用于按钮或任何类型的操作。 您必须告知广告位“操作”,它将在每一行中呈现。 如果您要在同一张表中使用多个动作,则可以为每个动作指定不同的ID,该ID将用作插槽ID。 格式为: __slot:actions:myActionID ,在这种情况下, myActionID 是插槽ID |
__slot:复选框 | 串 | 假 | 空值 | 用于创建带有复选框的列。 每次您选中或取消选中一个项目都会触发一个事件。 |
DataTable CSS道具结构 (DataTable Css Props Structure)
Name | Type | Required | Default | Description |
---|
table | string | false | '' | Applied on the table element. |
thead | string | false | '' | Applied on the table thead element. |
theadTr | string | false | '' | Applied on the table thead tr elements. |
theadTh | string | false | '' | Applied on the table thead th elements. |
tbody | string | false | '' | Applied on the table tbody element. |
tbodyTr | string | false | '' | Applied on the table tbody tr elements. |
tbodyTd | string | false | '' | Applied on the table tbody td elements. |
tbodyTrSpinner | string | false | '' | Applied on the table tbody tr element when the spinner is displayed. |
tbodyTdSpinner | string | false | '' | Applied on the table tbody td element when the spinner is displayed. |
tfoot | string | false | '' | Applied on the table tfoot element. |
tfootTr | string | false | '' | Applied on the table tfoot tr element. |
tfootTd | string | false | '' | Applied on the table tfoot td element. |
footer | string | false | '' | Applied on the table tfoot div element wrapping the slots. |
thWrapper | string | false | '' | Applied on div inside the table thead th element wrapping the column header content. |
thWrapperCheckboxes | string | false | '' | Applied on div inside the table thead th element wrapping the column header content when it is a checkbox. |
arrowsWrapper | string | false | '' | Applied on div inside the table thead th element wrapping the arrows. |
arrowUp | string | false | '' | Applied on div inside the table thead th element where the arrow up is draw. |
arrowDown | string | false | '' | Applied on div inside the table thead th element where the arrow down is draw. |
checkboxHeader | string | false | '' | Applied on the table thead checkbox element. |
checkbox | string | false | '' | Applied on the table tbody checkbox elements. |
notFoundTr | string | false | '' | Applied on the table tbody tr element when the data is empty. |
notFoundTd | string | false | '' | Applied on the table tbody td element when the data is empty. |
名称 | 类型 | 需要 | 默认 | 描述 |
---|
表 | 串 | 假 | '' | 应用在表格元素上。 |
Thead | 串 | 假 | '' | 应用在表thead元素上。 |
剧院 | 串 | 假 | '' | 应用于表主题元素。 |
治疗 | 串 | 假 | '' | 应用于表格中的元素。 |
身体 | 串 | 假 | '' | 应用在表的tbody元素上。 |
tbodyTr | 串 | 假 | '' | 应用于表体t元素。 |
tbodyTd | 串 | 假 | '' | 在表体上应用了td元素。 |
tbodyTrSpinner | 串 | 假 | '' | 显示微调器时,将其应用到表tbody tr元素上。 |
tbodyTdSpinner | 串 | 假 | '' | 显示微调器时,将其应用于表tbody td元素。 |
foot | 串 | 假 | '' | 应用于桌子上的tfoot元素。 |
tfootTr | 串 | 假 | '' | 应用于表脚上的tr元素。 |
tfootTd | 串 | 假 | '' | 应用于表tfoot td元素。 |
页脚 | 串 | 假 | '' | 应用在包裹槽Kong的表脚div元素上。 |
包装器 | 串 | 假 | '' | 应用于div中的表格thead th元素,该元素包装了列标题内容。 |
thWrapperCheckboxes | 串 | 假 | '' | 应用于表格中的div元素时,表thead元素将包装列标题的内容作为复选框。 |
ArrowWrapper | 串 | 假 | '' | 应用在div表格内的thethe元素和环绕箭头的元素上。 |
arrowUp | 串 | 假 | '' | 应用于div表格内的theat元素内,绘制向上箭头。 |
向下箭头 | 串 | 假 | '' | 应用于div表中的thethe th元素内,绘制向下箭头。 |
复选框标题 | 串 | 假 | '' | 在表thead复选框元素上应用。 |
复选框 | 串 | 假 | '' | 应用在表的tbody复选框元素上。 |
notFoundTr | 串 | 假 | '' | 当数据为空时,应用于表tbody tr元素。 |
notFoundTd | 串 | 假 | '' | 当数据为空时,应用于表tbody td元素。 |
Name | Type | Required | Default | Description |
---|
totalItems | number | true | null | Total of items in your storage. |
itemsPerPage | number | false | 10 | Number of items displayed per page. |
page | number | false | 1 | Current page index. |
moveLastPage | boolean | false | true | Flag to show or not the button to move to the last page. |
moveFirstPage | boolean | false | true | Flag to show or not the button to move to the first page. |
moveNextPage | boolean | false | true | Flag to show or not the button to move to the next page. |
movePreviousPage | boolean | false | true | Flag to show or not the button to move to the previous page. |
名称 | 类型 | 需要 | 默认 | 描述 |
---|
totalItems | 数 | 真正 | 空值 | 您存储中的项目总数。 |
每页项目 | 数 | 假 | 10 | 每页显示的项目数。 |
页 | 数 | 假 | 1个 | 当前页面索引。 |
moveLastPage | 布尔值 | 假 | 真正 | 标记显示或不显示按钮以移至最后一页。 |
moveFirstPage | 布尔值 | 假 | 真正 | 标记显示或不显示按钮以移至第一页。 |
moveNextPage | 布尔值 | 假 | 真正 | 标记显示或不显示按钮以移至下一页。 |
movePreviousPage | 布尔值 | 假 | 真正 | 标记显示或不显示按钮以移至上一页。 |
ItemsPerPageDropdown道具 (ItemsPerPageDropdown Props)
Name | Type | Required | Default | Description |
---|
listItemsPerPage | array | false | [10, 20, 30] | An array of numbers which the user will have the posibily to change how many items are displayed in the DataTable. |
itemsPerPage | number | false | 10 | Current value of how many items are displayed on the DataTable. |
名称 | 类型 | 需要 | 默认 | 描述 |
---|
listItemsPerPage | 数组 | 假 | [10,20,30] | 用户可以随意更改数字表中显示的项目数的数组。 |
每页项目 | 数 | 假 | 10 | 数据表上显示多少个项目的当前值。 |
安装 (Installation)
npm install v-datatable-light
项目设置 (Project setup)
npm install
编译和热重装以进行开发 (Compiles and hot-reloads for development)
npm run serve
编译并最小化生产 (Compiles and minifies for production)
npm run build
运行测试 (Run your tests)
npm run test
整理和修复文件 (Lints and fixes files)
npm run lint
翻译自: https://vuejsexamples.com/a-lightweight-vue-datatable-component-with-no-dependencies/
vue轻量级弹幕组件