# vue-tabulation

**Repository Path**: yangjunye/vue-tabulation

## Basic Information

- **Project Name**: vue-tabulation
- **Description**: 一个基于 vue 的表格组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://yangjunye.gitee.io/vue-tabulation
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-06-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-tabulation

一款高性能高扩展性的 vue 表格组件

## 安装

使用 npm

```bash
npm install vue-tabulation
```

直接下载/CDN 引用

```html
<script src="https://unpkg.com/vue-tabulation"></script>
```

## 使用

```html
<template>
  <vue-tabulation
    :columns="columns"
    :dataSource="dataSource"
  ></vue-tabulation>
</template>

<script>
import VueTabulation from 'vue-tabulation'
export default {
  components: {
    VueTabulation,
  },
  data() {
    return {
      columns: [
        {
          label: "姓名",
          prop: "name",
          width: 100
        },
        {
          label: "年龄",
          width: 60,
          prop: "age"
        },
        {
          label: "住址",
          width: 200,
          prop: "address"
        }
      ],
      dataSource: [{
        name: '张三',
        age: 20,
        address: "上海市普陀区金沙江路 1518 弄",
      },{
        name: '李四',
        age: 40,
        address: "上海市普陀区金沙江路 1518 弄",
      },{
        name: '王五',
        age: 18,
        address: "上海市普陀区金沙江路 1518 弄",
      }]
    };
  }
};
</script>
```

## 在线 demo

1. [使用 script](https://codepen.io/yangjunjun/pen/MMYXjj)
2. [使用构建工具使用](https://codesandbox.io/embed/vue-template-ou18f)

## 更多示例

http://yangjunye.gitee.io/vue-tabulation

源码在`<本仓库>/demo`

执行 `npm run dev` 查看效果