vue-table-dynamic

vue-table-dynamic 是一个动态表格组件

特性

• 面向运行时，实时响应源数据变化，动态更新表格内容与形态
• 支持行多选
• 支持搜索过滤
• 支持指定列排序
• 支持配置列宽度
• 支持指定 行/列/单元 可编辑
• 支持指定 行/列/单元 高亮背景
• 支持指定列筛选（开发中）
• 支持分页（开发中）
• 支持通过作用域插槽自定义表格单元内容（开发中）
• 所有特性均可按需配置启用或禁用

Demo

https://theoxiong.github.io/vue-table-dynamic/

安装

$   npm install vue-table-dynamic --save

使用

引入模块

import VueTableDynamic from 'vue-table-dynamic'

注册

全局注册

Vue.use(VueTableDynamic)

组件内注册

<script>
export default {
  components: { VueTableDynamic }
}
</script>

基础表格

基础的表格展示用法

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

多选

配置showCheck属性，启用多选特性

通过select事件和selection-change事件，监听用户勾选操作 通过getCheckedRowDatas方法获取当前所有选中的行数据 通过setAllRowChecked方法将选中状态切换为全选或清空选择

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

搜索过滤

配置enableSearch属性，启用行搜索特性

通过filter方法可以手动对行过滤，适用于自定义搜索框（配置enableSearch为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',
        enableSearch: true
      }
    }
  },
  methods: {
  },
  components: { VueTableDynamic }
}
</script>

排序

配置sort属性，启用排序特性

sort类型为Array<number>，数组成员为启用排序的列索引。如：sort: [0, 1]，基于第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>

编辑

配置edit属性，启用排序特性

edit类型为{row?: Array<number>; column?: Array<number>; cell?: Array<[number,number]>;}。如：{row: [1], column: [1], cell: [[-1, -1]]}，负数表示倒序索引 配置为{row: 'all'}时，所有单元均可编辑 通过cell-change事件，监听编辑操作 通过getData方法，获取最新表格数据 如果配置了 header: 'row'，则第一行表头不可编辑

API