vue 生成 dom组件_具有虚拟dom的Vue表组件

vue 生成 dom组件

虚拟虚拟表 (vue-virtual-table)

Vue table component with virtual dom and easy api.

具有虚拟dom和简单api的Vue表组件。

• Keep smooth when the data reachs thousands of rows or even more.

  当数据达到数千行甚至更多时，请保持平滑。

• Easy to use with a simple config.

  易于使用，配置简单。

View demo 查看演示 Download Source 下载源

用法 (Usage)

A simplest example:

最简单的例子：

<template>
  <vue-virtual-table
    :config="tableConfig"
    :data="tableData"
  >
  </vue-virtual-table>
</template>

<script>
import VueVirtualTable from 'vue-virtual-table'
export default {
  components: {
    VueVirtualTable
  },
  data: {
    tableConfig: [
      {prop: 'user'},
      {prop: 'age'}
    ],
    tableData: [
      {user: 'a1', age: 20},
      {user: 'a2', age: 21},
      {user: 'a3', age: 23}
    ]
  }
}
</script>

Every item of the config refers to a column. When you don't set sepcific 'name' of the table column header, it will uses the 'prop' value as default. Or you can set the tableConfig like:

配置的每个项目都指向一列。 当您未设置表列标题的单独“名称”时，它将使用“ prop”值作为默认值。 或者您可以像这样设置tableConfig：

tableConfig: [
  { prop: "user", name: "User Name" },
  { prop: "age", name: "Age" }
];

And if you want to search in the 'user' column, set the tableConfig like:

如果要在“用户”列中进行搜索，请像下面这样设置tableConfig：

tableConfig: [
  { prop: "user", name: "User Name", searchable: true },
  { prop: "age", name: "Age" }
];

For the 'age' column which is a set of number, you'd better use 'numberFilter' to filter numbers with "<", ">", "between" etc.

对于由数字组成的“年龄”列，最好使用“ numberFilter”来过滤带有“ <”，“>”，“介于”等的数字。

tableConfig: [
  { prop: "user", name: "User Name", searchable: true },
  { prop: "age", name: "Age", numberFilter: true }
];

There are many convenient features hard to explain one by one. Here is a complex example and you can get more info in the tables below the example:

有许多便利的功能很难一一解释。 这是一个复杂的示例，您可以在示例下方的表中获取更多信息：

<template>
  <vue-virtual-table
    :config="tableConfig"
    :data="tableData"
    :height="800"
    :itemHeight="55"
    :minWidth="1000"
    :selectable="true"
    :enableExport="true"
    v-on:changeSelection="handleSelectionChange"
  >
    <template slot-scope="scope" slot="actionCommon">
      <button @click="edit(scope.index, scope.row)">Edit</button>
      <button @click="del(scope.index, scope.row)">Delete</button>
    </template>
  </vue-virtual-table>
</template>

<script>
import VueVirtualTable from 'vue-virtual-table'
export default {
  components: {
    VueVirtualTable
  },
  data: {
    tableConfig: [
      {prop: '_index', name: '#', width: 80},
      {prop: 'user', name: 'User', searchable: true, sortable: true, summary: 'COUNT'},
      {prop: 'age', name: 'Age', numberFilter: true},
      {prop: 'city', name: 'City', filterable: true},
      {prop: '_action', name: 'Action', actionName: 'actionCommon'}
    ],
    tableData: [
      {user: 'a1', age: 20, city: 'aaaa'},
      {user: 'a2', age: 21, city: 'bbbb'},
      {user: 'a3', age: 23, city: 'aaaa'}
    ]
  },
  methods: {
    handleSelectionChange(rows){
      console.log(rows)
    },
    edit(index, row){
      console.log(index)
    },
    del(index, row){
      console.log(index)
    }
  }
}
</script>

表格属性 (Table Attributes)

name	type	description	required	default
data	Array	The array of data. Every item is a row.	Yes
config	Array	The config of table.	Yes
minWidth	Number	Set the minimum width of table.	No	1200px
height	Number	Set the height of table.	No	300px
itemHeight	Number	Set the height of row.	No	42px
bordered	Boolean	Whether table has vertical border.	No	false
hoverHighlight	Boolean	Whether to hightlight current row.	No	true
selectable	Boolean	Whether row is selectable.	No	false
enableExport	Boolean	Whether to show export-to-table button	No	false
language	String	Language from ['en', 'cn']	No	'cn'

名称	类型	描述	需要	默认
数据	数组	数据数组。 每个项目都是一行。	是
配置	数组	表的配置。	是
minWidth	数	设置表格的最小宽度。	没有	1200像素
高度	数	设置桌子的高度。	没有	300像素
itemHeight	数	设置行的高度。	没有	42像素
接壤的	布尔型	表格是否有垂直边框。	没有	假
悬停亮点	布尔型	是否突出显示当前行。	没有	真正
可选择的	布尔型	行是否可选。	没有	假
enableExport	布尔型	是否显示导出到表格按钮	没有	假
语言	串	来自['en'，'cn']的语言	没有	'cn'

表事件 (Table Events)

name	parameters	description
changeSelection	rows	When the selected rows change

名称	参数	描述
changeSelection	行数	当选定的行更改时

表配置 (Table Config)

param	type	description	required	default
prop	String	Property name	Yes
name	String	Display name	No	same to the property name
width	Number	Column width	No	auto
sortable	Boolean	Whether this column is sortable	No	false
searchable	Boolean	Whether this column is searchable	No	false
filterable	Boolean	Whether this column is filterable	No	false
numberFilter	Boolean	If it's a column of number. You can use this.	No	false
summary	String	summary type from ['COUNT', 'SUM'] or customize.	No
prefix	String	Display before the value	No
suffix	String	Display after the value	No
alignItems	String	Same with flex. Control the content of a cell	No	center
isHidden	Boolean	Whether this column is hidden	No	false

参数	类型	描述	需要	默认
Struts	串	物业名称	是
名称	串	显示名称	没有	与属性名称相同
宽度	数	列宽	没有	汽车
可排序	布尔型	此列是否可排序	没有	假
可搜寻的	布尔型	此列是否可搜索	没有	假
可过滤的	布尔型	此列是否可过滤	没有	假
numberFilter	布尔型	如果是一列数字。 您可以使用它。	没有	假
摘要	串	[[COUNT]，“ SUM”]中的摘要类型或自定义。	没有
字首	串	在值之前显示	没有
后缀	串	数值后显示	没有
alignItems	串	与flex相同。 控制单元格的内容	没有	中央
隐藏	布尔型	此列是否隐藏	没有	假

特殊道具 (Special Props)

name	description
_index	Show the index of row
_action	A slot to customize the content
_expand	A slot to customize a popover window

名称	描述
_指数	显示行的索引
_行动	定制内容的插槽
_扩大	用于自定义弹出窗口的插槽

翻译自: https://vuejsexamples.com/vue-table-component-with-virtual-dom/

vue 生成 dom组件