# vue-easy-data-grid

> A dataGrid for Vue.js

Latest version **0.0.1** (published 2018-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-easy-data-grid
pnpm add vue-easy-data-grid
yarn add vue-easy-data-grid
bun add vue-easy-data-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2018-03-17 |
| First published | 2018-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 44.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | yuw |
| Maintainers | hunterads |
| Keywords | vue, dataGrid, components |

## Links

- npm: https://www.npmjs.com/package/vue-easy-data-grid
- Repository: https://github.com/keluo/vue.dataGrid
- Homepage: https://github.com/keluo/vue.dataGrid#readme
- npm.io page: https://npm.io/package/vue-easy-data-grid

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.4.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2018-03-17

## README

# vue.dataGrid
> dataGrid for Vue.js

## 初始化插件
```javascript
import Vue from 'vue'
import VueDataGrid from 'VueDataGrid'
Vue.use(VueDataGrid)
```

## 使用
#### 1。基本表格
##### HTML Template
```html
<vue-data-grid 
  :list-data="listData"
  :columns="columns"
  :zebra="true"
  :is-key-value="true">
</vue-data-grid>
```
##### javascript 
```javascript
export default {
  name: 'App',
  data () {
    return {
      listData:[{ id:1,name:'张三',age:'18'},{id:2,name:'李四',age:'18' }],
      columns:{ id:'学号',name:'姓名',age:'年龄' },
    }
  }
}
```
#### 2、带操作
##### HTML Template
```html
<vue-data-grid 
  :list-data="listData"
  :columns="columns"
  :zebra="true"
  :is-key-value="true"
  :has-operation="true">
  <template slot-scope="props">
    <a href="javascript:void(0);" @click="deleteData(props)">删除</a>
  </template>
</vue-data-grid>
```
##### javascript 
```javascript
export default {
  name: 'App',
  data () {
    return {
      listData:[{ id:1,name:'张三',age:'18'},{id:2,name:'李四',age:'18' }],
      columns:{ id:'学号',name:'姓名',age:'年龄' },
    }
  }，
  methods:{
    deleteData(data){
      console.log(data);
    }
  }
}
```
#### 3、自定义列
##### HTML Template
```html
<vue-data-grid 
  :list-data="listData"
  :columns="columns"
  :zebra="true"
  :is-key-value="true">
</vue-data-grid>
```
##### javascript 
```javascript
export default {
  name: 'App',
  data () {
    return {
      listData:[{ id:1,name:'张三',age:'18'},{id:2,name:'李四',age:'18' }],
      columns:{
        id:'学号',
        name:'姓名',
        age:{
          name:'年龄',
          //自定义时，格式化回掉函数
          formatter(data){
            return '<a href="javascript:void(0);">' + data['age']+'岁</a>';
          },
          //自定义时，点击回掉函数
          click(data){
            alert(data['age']);
          }
        }
      },
    }
  }，
  methods:{
  }
}
```
#### 4、多选
##### HTML Template
```html
<vue-data-grid 
  :list-data="listData"
  :columns="columns"
  :zebra="true"
  :is-key-value="true"
  :selection="true"
  @on-selection-change="onSelectionChange">
</vue-data-grid>
```
##### javascript 
```javascript
export default {
  name: 'App',
  data () {
    return {
      listData:[{ id:1,name:'张三',age:'18'},{id:2,name:'李四',age:'18' }],
      columns:{ id:'学号',name:'姓名',age:'年龄' },
    }
  },
  methods:{
    onSelectionChange(value){
      //输出为数组，数组内对应的index选中为true，不选中为false或者没有值
      console.log(value);
    },
  }
}
``` 
#### 5、显示加载中
##### HTML Template
```html
<vue-data-grid 
  :list-data="listData"
  :columns="columns"
  :zebra="true"
  :is-key-value="true"
  :is-loading="isLoading">
</vue-data-grid>
<a href="javascript:void(0);" @click="showloading">加载数据</a>
```
##### javascript 
```javascript
export default {
  name: 'App',
  data () {
    return {
      listData:[{ id:1,name:'张三',age:'18'},{id:2,name:'李四',age:'18' }],
      columns:{ id:'学号',name:'姓名',age:'年龄' },
      isLoading:true
    }
  },
  mounted(){
    let that = this;
    setTimeout(()=>{
      that.isLoading = false;
    },5000);
  },
  methods:{
    showloading(){
      this.isLoading = true;
      let that = this;
      setTimeout(()=>{
        that.isLoading = false;
      },5000);
    }
  },
}
```
#### 6、排序
##### HTML Template
```html
<vue-data-grid 
  :list-data="listData"
  :columns="columns"
  :zebra="true"
  :is-key-value="true">
</vue-data-grid>
```
##### javascript 
```javascript
export default {
  name: 'App',
  data () {
    return {
      listData:[{ id:1,name:'张三',age:'18'},{id:2,name:'李四',age:'18' }],
      columns:{
        id:'学号',
        name:'姓名',
        age:{
          name:'年龄',
          sort:{
            /*
            非必需，数组初始化时的排序，
            参数：up（正序）down（倒序）
            */
            type:'up',
            /*
            非必需，自定义排序规则，ajax调用后端，
            参数：type（同上面的参数type）key（当前的字段的key，这个是'age'）
            注意：当custom存在时，上面的type不起作用
            */
            custom(type,key){
              console.log(type,key);
            }
          }
        }
      },
    }
  }
}
```

---
_Source: https://npm.io/package/vue-easy-data-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._