您的位置:首页 > Web前端 > Vue.js

vue 动态组件组件复用_动态表的Vue组件

2020-07-31 08:36 441 查看

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 border

    border:
    带边框为
    true

  • border:
    false
    without border

    border:
    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
    striped

    stripe:
    true
    条纹

  • stripe:
    false
    unstriped

    stripe:
    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 colors

    highlightedColor:
    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 rows

    showCheck:
    boolean
    显示行的复选框

  • getCheckedRowDatas:
    function
    get data for all currently selected rows

    getCheckedRowDatas:
    function
    获取当前所有选定行的数据

  • setAllRowChecked:
    function(selected:boolean)
    toggle all selection

    setAllRowChecked:
    function(selected:boolean)
    切换所有选择

  • select:
    event
    currently selected/unselected rows

    select:
    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 searching

    enableSearch:
    boolean
    启用/禁用搜索

  • search:
    function(value:string)
    manual row filtering

    search:
    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 index

    filter[].column:
    列索引

  • filter[].content:
    filter items

    filter[].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 pagination

    pagination:
    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 event

    cell-change:
    event
    单元格数据更改事件

  • edit:
    {row: 'all'}
    all cells can be edited

    edit:
    {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 column

    columnWidth[].column
    索引

  • columnWidth[].width
    width of column. number for pixel value, string for percentage

    columnWidth[].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 header

    header:
    row
    中的第一行是头

  • header:
    column
    the first column is header

    header:
    column
    第一列是标头

  • header:
    ''
    no header

    header:
    ''
    无标头

<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 height

    height:
    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 component
    props

    params
    是需要传递给组件
    props

  • the following items are all child properties of the

    params
    object

    以下各项是

    params
    对象的所有子属性

  • data
    is required attribute, others are optional

    data
    是必填属性,其他是可选属性

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
header
is
'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;
method
filter rule.
Array<{column, content, method}> - -
edit
specifying rows/columns/cells for editing. table data changed after editing, get the latest data by
getData
method
{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: boolean
include header row when the first row is header,default is
false
Array<[number, ..., number]>
getRowData
get row data by index
rowIndex:number
index;
isCurrent: boolean
is the index sorted,default is
false
Array<number>
search
manual row filtering
searchValue:string
keyword
-
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 动态组件组件复用

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: