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 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配置突出显示的颜色