vue 动态组件组件复用_动态表的Vue组件
vue 动态组件组件复用
表动态 (vue-table-dynamic)
A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.
具有排序,过滤,编辑,分页,多选等的动态表。
vue-table-dynamic is a vue component of dynamic table. It's designed to respond to data changes in real time, and oriented to the runtime.
vue-table-dynamic是动态表的vue组件。 它旨在实时响应数据更改,并面向运行时。
View Demo 查看演示 View Github 查看Github特征 (Features)
Multiple Select
多选
Search
搜索
Sort
分类
Filter
过滤
Pagination
分页
Edit
编辑
Border
边境
Stripe
条纹
Highlight
突出
Column Width
列宽
Configure Header
配置标题
Fixed Header
固定头
安装 (Install)
$ npm install vue-table-dynamic --save
用法 (Usage)
进口 (Import)
import VueTableDynamic from 'vue-table-dynamic'
注册 (Registration)
全球注册 (Global registration)
Vue.use(VueTableDynamic)
本地注册 (Local registration)
<script> export default { components: { VueTableDynamic } } </script>
基本表 (Basic Table)
Basic table usage
基本表格用法
<template> <div class="base-demo" style="width: 400px"> <vue-table-dynamic :params="params"></vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Cell-1', 'Cell-2', 'Cell-3'], ['Cell-4', 'Cell-5', 'Cell-6'], ['Cell-7', 'Cell-8', 'Cell-9'] ] } } }, components: { VueTableDynamic } } </script>
边境 (Border)
Bordered table usage
带边框表的用法
border:
true
with borderborder:
带边框为true
border:
false
without borderborder:
false
无边框
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table"></vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', border: true } } }, components: { VueTableDynamic } } </script>
条纹 (Stripe)
Striped rows
条纹行
stripe:
true
stripedstripe:
true
条纹stripe:
false
unstripedstripe:
false
无stripe:
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table"></vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'], [4, 'hf7y8c', '4rghjk', 'cgnhik'] ], header: 'row', border: true, stripe: true } } }, components: { VueTableDynamic } } </script>
突出 (Highlight)
Highlighted rows/columns/cells
突出显示的行/列/单元格
highlight:
{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;}
configure highlighted rows, columns, cells. such as:{row: [1], column: [1], cell: [[-1, -1]]}
if negative, the position from the end of the array.highlight:
{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;}
{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;}
{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;}
配置突出显示的行,列,单元格。 例如:{row: [1], column: [1], cell: [[-1, -1]]}
如果为负,则从数组末尾开始。highlightedColor:
string
configure highlighted colorshighlightedColor:
string
配置突出显示的颜色
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table"></vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'], [4, 'hf7y8c', '4rghjk', 'cgnhik'] ], header: 'row', border: true, stripe: true, highlight: { column: [-2] }, highlightedColor: 'rgb(243, 235, 200)' } } }, components: { VueTableDynamic } } </script>
多选 (Multiple Select)
Select multiple rows
选择多行
showCheck:
boolean
show checkbox of rowsshowCheck:
boolean
显示行的复选框getCheckedRowDatas:
function
get data for all currently selected rowsgetCheckedRowDatas:
function
获取当前所有选定行的数据setAllRowChecked:
function(selected:boolean)
toggle all selectionsetAllRowChecked:
function(selected:boolean)
切换所有选择select:
event
currently selected/unselected rowsselect:
event
当前选中/未选中的行
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" @select="onSelect" @selection-change="onSelectionChange" ref="table" > </vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', showCheck: true } } }, methods: { onSelect (isChecked, index, data) { console.log('onSelect: ', isChecked, index, data) console.log('Checked Data:', this.$refs.table.getCheckedRowDatas(true)) }, onSelectionChange (checkedDatas, checkedIndexs, checkedNum) { console.log('onSelectionChange: ', checkedDatas, checkedIndexs, checkedNum) } }, components: { VueTableDynamic } } </script>
搜索 (Search)
Filter rows by keyword
按关键字过滤行
enableSearch:
boolean
enable/disable searchingenableSearch:
boolean
启用/禁用搜索search:
function(value:string)
manual row filteringsearch:
function(value:string)
手动行过滤
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table" > </vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', enableSearch: true } } }, methods: { }, components: { VueTableDynamic } } </script>
分类 (Sort)
Sort rows based on specified column data
根据指定的列数据对行进行排序
sort:
Array<number>
array members are sortable column indexes. such as:[0, 1]
sort:
Array<number>
数组成员是可排序的列索引。 例如:[0, 1]
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table" > </vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', sort: [0, 1] } } }, methods: { }, components: { VueTableDynamic } } </script>
过滤 (Filter)
Filter rows based on specified column data and rule
根据指定的列数据和规则过滤行
filter:
Array<{column:number; content:Array<{text:string; value:string|number;}>; method:function;}>
specify filterable columns and rules. such as:[{column: 0, content: [{text: '> 2', value: 2}], method: (value, cell) => { return cell.data > value }}]
filter:
Array<{column:number; content:Array<{text:string; value:string|number;}>; method:function;}>
Array<{column:number; content:Array<{text:string; value:string|number;}>; method:function;}>
Array<{column:number; content:Array<{text:string; value:string|number;}>; method:function;}>
指定可过滤的列和规则。 例如:[{column: 0, content: [{text: '> 2', value: 2}], method: (value, cell) => { return cell.data > value }}]
filter[].column:
column indexfilter[].column:
列索引filter[].content:
filter itemsfilter[].content:
过滤项filter[].method:
filter rule.filter[].method:
过滤规则。
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table" > </vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Time'], [1, 'b3ba90', '9a3853', '2019-01-01 10:10'], [2, 'ec0b78', 'ecf03c', '2019-02-02 11:11'], [3, '7c95f7', 'fdf451', '2019-02-02 12:12'], [4, 'ba045d', '34fdgh', '2019-02-02 13:13'], [5, 'a8c325', '4678de', '2019-03-03 14:14'] ], header: 'row', filter: [{ column: 0, content: [{text: '> 2', value: 2}, {text: '> 4', value: 4}], method: (value, tableCell) => { return tableCell.data > value } }, { column: 3, content: [{text: '2019-01-01', value: '2019-01-01'}, {text: '2019-02-02', value: '2019-02-02'}], method: (value, tableCell) => { return String(tableCell.data).toLocaleLowerCase().includes(String(value).toLocaleLowerCase()) } }], } } }, methods: { }, components: { VueTableDynamic } } </script>
分页 (Pagination)
Table with pagination
分页表
pagination:
boolean
enable/disable paginationpagination:
boolean
启用/禁用分页pageSize?:
number
row count of each page. default:10
pageSize?:
number
每页的行数。 默认值:10
pageSizes?:
Array<number>
options of row count per page. default:[10, 20, 50, 100]
pageSizes?:
每页行数的Array<number>
选项。 默认值:[10, 20, 50, 100]
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table" > </vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' const random = () => { return parseInt(Date.now() + Math.random() * 10000000).toString(16).slice(-6) } export default { name: 'Demo', data() { return { params: { data: [ ['Index', `Data1`, `Data2`, `Data3`] ], header: 'row', border: true, stripe: true, pagination: true, pageSize: 5, pageSizes: [5, 10, 20, 50] } } }, mounted () { for (let i = 0; i < 100; i++) { this.params.data.push([i+1, `${random()}`, `${random()}`, `${random()}`]) } }, components: { VueTableDynamic } } </script>
编辑 (Edit)
Editable table Support specifying rows/columns/cells for editing
可编辑表格支持指定要编辑的行/列/单元格
edit:
{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;}
configure editable rows, columns, cells. such as:{row: [1], column: [1], cell: [[-1, -1]]}
. if negative, the position from the end of the array.edit:
{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;}
{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;}
{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;}
配置可编辑的行,列,单元格。 例如:{row: [1], column: [1], cell: [[-1, -1]]}
。 如果为负,则为数组末尾的位置。getData:
function()
table data changed after editing, get the latest data by this method.getData:
编辑后更改的function()
表数据,通过此方法获取最新数据。cell-change:
event
cell data changed eventcell-change:
event
单元格数据更改事件edit:
{row: 'all'}
all cells can be editededit:
{row: 'all'}
所有单元格都可以编辑if
header
is'row'
, the first row is not editable如果
header
为'row'
,则第一行不可编辑
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" @cell-change="onCellChange" ref="table" > </vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', edit: { row: [1], column: [1], cell: [[-1, -1]] } } } }, methods: { onCellChange (rowIndex, columnIndex, data) { console.log('onCellChange: ', rowIndex, columnIndex, data) console.log('table data: ', this.$refs.table.getData()) } }, components: { VueTableDynamic } } </script>
列宽 (Column width)
Configure column width
配置列宽
columnWidth:
Array<{column:number; width:number|string;}>
such as:[{column: 0, width: 60}, {column: 3, width: '15%'}]
columnWidth:
Array<{column:number; width:number|string;}>
Array<{column:number; width:number|string;}>
如:[{column: 0, width: 60}, {column: 3, width: '15%'}]
columnWidth[].column
index of columncolumnWidth[].column
索引columnWidth[].width
width of column. number for pixel value, string for percentagecolumnWidth[].width
列的宽度。 数字代表像素值,字符串代表百分比
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table"></vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'row', border: true, columnWidth: [{column: 0, width: 60}, {column: 3, width: '15%'}], } } }, components: { VueTableDynamic } } </script>
标头配置 (Header Configure)
header:
row
the first row is headerheader:
row
中的第一行是头header:
column
the first column is headerheader:
column
第一列是标头header:
''
no headerheader:
''
无标头
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table"></vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' export default { name: 'Demo', data() { return { params: { data: [ ['Index', 'Data1', 'Data2', 'Data3'], [1, 'b3ba90', '7c95f7', '9a3853'], [2, 'ec0b78', 'ba045d', 'ecf03c'], [3, '63788d', 'a8c325', 'aab418'] ], header: 'column', border: true, columnWidth: [{column: 0, width: 60}] } } }, components: { VueTableDynamic } } </script>
固定头 (Fixed Header)
Fix header by configure the height of table
通过配置表的高度来修复标题
height:
number
table heightheight:
number
表高度when the value of
header
is not'row'
, the first row is a normal row, will not fixed当
header
的值不是'row'
,第一行是普通行,将不固定
<template> <div style="width: 600px"> <vue-table-dynamic :params="params" ref="table" > </vue-table-dynamic> </div> </template> <script> import VueTableDynamic from 'vue-table-dynamic' const random = () => { return parseInt(Date.now() + Math.random() * 10000000).toString(16).slice(-6) } export default { name: 'Demo', data() { return { params: { data: [ ['Index', `Data1`, `Data2`, `Data3`] ], header: 'row', border: true, stripe: true, height: 180 } } }, mounted () { for (let i = 0; i < 12; i++) { this.params.data.push([i+1, `${random()}`, `${random()}`, `${random()}`]) } }, components: { VueTableDynamic } } </script>
API (API)
属性 (Attributes)
params
is the object that need to be passed to the componentprops
params
是需要传递给组件props
the following items are all child properties of the
params
object以下各项是
params
对象的所有子属性data
is required attribute, others are optionaldata
是必填属性,其他是可选属性
name | description | type | optional value | default value |
---|---|---|---|---|
data |
source data | Array<[number, ..., number]> |
- | [] |
header |
configure header | string |
row: the first row is header; column: the first column is header; '': no header |
'' |
border |
table with border | boolean |
true/ false |
false |
stripe |
striped table | boolean |
true/ false |
false |
highlight |
configure highlighted rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]}. if negative, the position from the end of the array. |
{row?:Array<>; column?:Array<>; cell?:Array<>;} | - | {} |
highlightedColor |
highlighted colors | string |
- | #EBEBEF |
showCheck |
show checkbox of rows. Only when the headeris 'row', the first cell of the first row is the checkbox of all rows. Otherwise, the first cell is the checkbox of the first row |
boolean |
true/ false |
false |
enableSearch |
enable/disable searching, filter rows by keyword | boolean |
true/ false |
false |
minWidth |
min width of table | number |
- | 300 |
maxWidth |
max width of table | number |
- | 1000 |
height |
table height. fix header by configure the height of table | number |
- | - |
rowHeight |
row height | number |
>= 24 |
30 |
columnWidth |
Configure column width | Array<{column:number; width:number/string;}> | - | - |
sort |
sort rows based on specified column data | Array<number> |
- | - |
filter |
filter rows based on specified column data and rule. column: index; content: filter items; methodfilter rule. |
Array<{column, content, method}> | - | - |
edit |
specifying rows/columns/cells for editing. table data changed after editing, get the latest data by getDatamethod |
{row?:Array<>; column?:Array<>; cell?:Array<>;} | - | - |
pagination |
table with pagination | boolean |
true/ false |
false |
pageSize |
row count of each page | number |
- | 10 |
pageSizes |
options of row count per page | Array<number> |
- | [10, 20, 50, 100] |
名称 | 描述 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data | 源数据 | Array<[number, ..., number]> | -- | [] |
header | 配置头 | string | row:第一行是标题; column:第一列是标题; '':无标题 |
'' |
border | 带边框表 | boolean | true/ false |
false |
stripe | 条纹桌 | boolean | true/ false |
false |
highlight | 配置突出显示的行,列,单元格。 例如:{行: [1],列: [1],单元格: [[-1, -1]]}。 如果为负,则为数组末尾的位置。 |
{row?:Array <>; 列?:数组<>; 单元格?:Array <>;} | -- | {} |
highlightedColor | 突出显示的颜色 | string | -- | #EBEBEF |
showCheck | 显示行复选框。 仅当header为 'row',第一 'row'的第一单元格才是所有行的复选框。 否则,第一个单元格是第一行的复选框 |
boolean | true/ false |
false |
enableSearch | 启用/禁用搜索,按关键字过滤行 | boolean | true/ false |
false |
minWidth | 桌子最小宽度 | number | -- | 300 |
maxWidth | 工作台最大宽度 | number | -- | 1000 |
height | 桌子的高度。 通过配置表的高度来修复标题 | number | -- | -- |
rowHeight | 行高 | number | >= 24 | 30 |
columnWidth | 配置列宽 | Array <{column:number; 宽度:数字/字符串;}> | -- | -- |
sort | 根据指定的列数据对行进行排序 | Array<number> | -- | -- |
filter | 根据指定的列数据和规则过滤行。 column:索引; content:过滤项; method过滤规则。 |
Array <{列,内容,方法}> | -- | -- |
edit | 指定要编辑的行/列/单元格。 编辑后更改表数据,通过getData方法获取最新数据 |
{row?:Array <>; 列?:数组<>; 单元格?:Array <>;} | -- | -- |
pagination | 分页表 | boolean | true/ false |
false |
pageSize | 每页的行数 | number | -- | 10 |
pageSizes | 每页行数选项 | Array<number> | -- | [10, 20, 50, 100] |
方法 (Methods)
method name | description | parameters | return |
---|---|---|---|
getData |
table data changed after editing, get the latest data by this method | - | Array<[number, ..., number]> |
getCheckedRowDatas |
get data for all currently selected rows | includeWhenHeaderInfirstRow: booleaninclude header row when the first row is header,default is false |
Array<[number, ..., number]> |
getRowData |
get row data by index | rowIndex:numberindex; isCurrent: booleanis the index sorted,default is false |
Array<number> |
search |
manual row filtering | searchValue:stringkeyword |
- |
clearSearch |
clear searching, show all rows | - | - |
方法名称 | 描述 | 参数 | 返回 |
---|---|---|---|
getData | 编辑后更改表数据,通过此方法获取最新数据 | -- | Array<[number, ..., number]> |
getCheckedRowDatas | 获取当前所有选定行的数据 | includeWhenHeaderInfirstRow: boolean当第一行为header时, includeWhenHeaderInfirstRow: boolean包含头行,默认为 false |
Array<[number, ..., number]> |
getRowData | 按索引获取行数据 | rowIndex:number索引; isCurrent: boolean是排序的索引,默认为 false |
Array<number> |
search | 手动行过滤 | searchValue:string关键字 |
-- |
clearSearch | 清除搜索,显示所有行 | -- | -- |
大事记 (Events)
event name | description | parameters |
---|---|---|
select |
event when selecting a row | checked: boolean; index: number; data: Array<string\number> |
select-all |
event when clicking the checkbox in table header | isCheckedAll: boolean |
row-click |
event when clicking a row | index:number; data:Array<string\number> |
cell-click |
event when clicking a cell | rowIndex:number; columnIndex:number; data:string\number |
cell-change |
event when edting a cell | rowIndex:number; columnIndex:number; data:string\number |
sort-change |
event when sorting | index: number; value: string |
活动名称 | 描述 | 参数 |
---|---|---|
select | 选择行时的事件 | checked: boolean; index: number; data: Array<string\number> |
select-all | 单击表标题中的复选框时发生的事件 | isCheckedAll: boolean |
row-click | 单击一行时的事件 | index:number; data:Array<string\number> |
cell-click | 单击单元格时发生的事件 | rowIndex:number; columnIndex:number; data:string\number |
cell-change | 单元格编辑时的事件 | rowIndex:number; columnIndex:number; data:string\number |
sort-change | 排序时的事件 | index: number; value: string |
翻译自: https://vuejsexamples.com/a-vue-component-of-dynamic-table/
vue 动态组件组件复用
- vue中的过渡&动画 动态组件 过滤器
- vue动态注册组件
- vue动态组件,完美案例
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
- 解决关于Vue父组件动态向子组件传递数据
- Vue之动态组件和异步组件
- vue组件(全局,局部,动态加载组件)
- Vue 组件4 动态组件
- 在vue中封装可复用的组件
- 解决vue中无法动态修改jqgrid组件 url地址
- 权限管理模块中动态加载Vue组件
- 权限管理模块中动态加载Vue组件
- Vue 动态组件与 v-once 指令的实现
- Vue组件--动态组件
- vue组件(全局,局部,动态加载组件)
- Vue.js的动态组件模板的实现
- 深入理解Vue组件八——动态组件与v-once指令
- Vue实现调节窗口大小时触发事件动态调节更新组件尺寸
- vue-router2.0 组件之间传参及获取动态参数
- vue2.0使用动态组件实现tab切换效果(vue-cli)