grid component used for pc
# install grid component
npm install vue-grid-pc --save
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
<template>
<div id="app">
<Grid
v-on:on-select="onSelect"
:choice-page-num="choicePageNum"
:handle="gridData.handle"
:data="gridData.data"
:cols="gridData.cols"
:paging="gridData.paging"
>
</Grid>
</div>
</template>
<script>
import Grid from 'components/'
export default {
components: {
Grid,
},
data () {
return {
gridData: {
data: [],
cols: [],
paging: {
totalNum: 100,
pageSize: 20
}
},
}
},
created(){
var _this = this
/**
* the cols setting for grid component
*/
this.gridData.cols = [{
name: '任务ID',
key: 'id',
width: 50,
},{
name: '创建时间',
key: 'ts',
width: 70,
format(key, val, item){
return (new Date(val)).toLocaleDateString();
}
},{
name: '优先级',
key: 'priority',
width: 50,
format(key, val, item){
var mok = {
1: '低级',
2: '高级'
}
return mok[item.priority]
}
},{
name: '任务来源',
key: 'source',
width: 70
},{
name: '行政区划',
key: 'province',
width: 70,
}]
/**
* add operated button to grid component
* 'rule' is used to match RegExp with operate
*/
this.gridData.handle = {
width: 100,
operateList: [{
name: '处理',
rule: '{priority}==1',
callback: (row) => {
//回调处理
console.log(row);
}
},{
name: '查看',
callback: (row) => {
//回调处理
console.log(row);
}
},{
name: '关闭',
callback: (row) => {
//回调处理
console.log(row);
}
}]
}
},
mounted(){
this.gridData.data = [{
id: 1,
ts: "2017/1/1 12:50",
province: '北京市',
source: '来源1',
priority: 1
},{
id: 2,
ts: "2017/1/1 12:50",
province: '北京市',
source: '来源2',
priority: 2
},{
id: 3,
ts: "2017/1/1 12:50",
province: '北京市',
source: '来源3',
priority: 1
},{
id: 4,
ts: "2017/1/1 12:50",
province: '北京市',
source: '来源4',
priority: 2
}]
},
methods: {
/**
* Grid组件单选回调
*/
onSelect(res){
// console.log(res);
},
/**
* 选择页码的回调
*/
choicePageNum(pagenum, paging){
console.log(pagenum);
},
}
}
</script>
- 属性说明
属性 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
on-select | Grid组件单选回调 | Function | 默认datatime | 否 |
choice-page-num | 选择页码的回调 | String | 默认无 | 否 |
handle | 操作按钮列表,用于每一行的操作 | Object | 数据格式参考附录 |
否 |
data | Grid component 的数据 | Array | 数据格式参考附录 |
是 |
cols | 列属性 | Array | 数据格式参考附录 |
否 |
paging | 分页数据: totalNum: 100(总记录条数) pageSize:20 (每页记录条数) |
Object | - | 是 |
theme | Grid component 的主题配色 | Object | - | 否 |
附录
- handle 数据格式:
/**
* add operated button to grid component
* 'rule' is used to match RegExp with operate
*/
let handle = {
width: 100,
operateList: [{
name: '处理',
rule: '{priority}==1',
callback: (row) => {
console.log(row);
}
},{
name: '查看',
callback: (row) => {
console.log(row);
}
},{
name: '关闭',
callback: (row) => {
console.log(row);
}
}]
}
- data 数据格式:
/**
* the data key is correspond with the cols's key
*/
let data = [{
id: 1,
ts: "2017/1/1 12:50",
province: 'BeiJing',
source: 'source1',
priority: 1
},{
id: 2,
ts: "2017/1/1 12:50",
province: 'NanJing',
source: 'source2',
priority: 2
}]
- cols 数据格式:
let cols = [{
name: 'ID',
key: 'id',
width: 50,
},{
name: 'CreateTime',
key: 'ts',
width: 70,
format(key, val, item){
return (new Date(val)).toLocaleDateString();
}
},{
name: 'Priority',
key: 'priority',
width: 50,
format(key, val, item){
var mok = {
1: '低级',
2: '高级'
}
return mok[item.priority]
}
}]
/**
* name: 是显示在grid component中列头部的文字内容
* key: 是要显示的数据的哪个字段
* width: 是列的宽度
* format: 格式化数据
*/
- 基本功能实现