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组件。 它旨在实时响应数据更改,并面向运行时。
特征 (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
基本表格用法
![basic](https://i-blog.csdnimg.cn/blog_migrate/8bbba487629860c22e1de0ea1a0187a1.png)
<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
无边框
![border](https://i-blog.csdnimg.cn/blog_migrate/06fcc8983a994afc4e4ce586fb9ceef4.png)
<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:
![stripe](https://i-blog.csdnimg.cn/blog_migrate/7df1388004b86f4c5f3223b41b59b544.png)
<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
配置突出显示的颜色