具有虚拟Dom的Vue表组件– vue-virtual-table

具有虚拟Dom的Vue表组件– vue-virtual-table
插件名称 vue-virtual-table
版本号 v0.2.19
发布时间 2020年6月13日
插件作者 waningflow

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

变更日志:

v0.2.19(01/18/2021)

  • 增加了对嵌套属性的支持

v0.2.17(11/30/2020)

  • 更新

v0.2.16(2020年8月31日)

  • 更新

v0.2.15(06/28/2020)

  • 错误修正

特征:

  • 当数据到达数千行甚至更多行时,请保持平滑。
  • 易于使用,配置简单。

安装:

yarn add vue-virtual-table

npm install --save vue-virtual-table

使用:

最简单的例子:

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

配置的每个项目都引用一列。当您不设置表列标题的单独“name”时,它将使用“ prop”值作为默认值。或者您可以像这样设置tableConfig:

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

如果要在“user”列中进行搜索,请像下面这样设置tableConfig:

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

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

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

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

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

表格属性

名称类型描述需要默认
dataArray数据数组。每个项目都是一行。 Yes
config Array表的配置。 Yes
minWidthNumber设置表格的最小宽度。No1200px
heightNumber设置桌子的高度。No300 px
itemHeightNumber设置行的高度。No42 px
borderedBoolean表格是否有垂直边框。Nofalse
hoverHighlightBoolean是否突出显示当前行。Notrue
selectableBoolean行是否可选。No false
enableExportBoolean是否显示导出到表格按钮No false
languageString来自[‘en’,’cn’]的语言No‘cn’

表事件

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

表配置

参数类型描述需要默认
prop String 物业名称Yes
name String 显示名称 No 与属性名称相同
width Number 列宽 No 汽车
sortable Boolean 此列是否可排序 No false
searchable Boolean 此列是否可搜索 No false
filterable Boolean 此列是否可过滤 No false
numberFilter Boolean 如果是一列数字。您可以使用它。 No false
summary String 来自[‘COUNT’,’SUM’]或自定义的摘要类型(例如${clicks}*100/${reach},使用其他两列的摘要进行计算)。 No
prefix String 在值之前显示 No
suffix String 数值后显示 No
alignItems String 与flex相同。控制单元格的内容 No center
isHidden Boolean 此列是否隐藏 No false
eTip Array 单元格的工具提示以显示某些道具(例如,['name']将在工具提示中显示“名称”道具的值) No
eTipWithProp Boolean 是否在工具提示中显示道具名称 No
eClass Object 将类附加到单元格(例如,{redColor: '${spend}>100'}将“ redColor”类添加到“支出”属性大于100的单元格) No No