vue-grid-pc

grid component used for pc

展示

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

DEMO

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

API

• 属性说明

属性	说明	类型	默认值	是否必传
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: 格式化数据
	 */

版本升级

0.0.1

• 基本功能实现