Cat-Table-Select 基于Vue+Element的表格选择器

Cat-Table-Select 基于Vue+Element的表格选择器

基于 Element 的Vue 组件(Vue.js 2.x)

cat-table-select Github 地址

前言

之前自己动手做了个基于Element树选择器 cat-tree-selec ，于是就照着之前的思路又封装了个表格选择器。目前已经实现了单选，多选，分页，自定义列，可搜索等功能。

效果预览

Demo 安装

复制仓库

git clone git@github.com:scuxiatian/cat-table-select.git

安装依赖

npm install

demo预览

npm run serve

实例

单选表格

<cat-table-select 
	v-model="value" 
	:data="data" 
	:columns="columns" 
	:props="props">
</cat-table-select>

export default {  
	data () {   
		return { 
			value: '',
			columns: [
				{ key: 'name',  label: '姓名', width: 100}, 
				{ key: 'address', label: '地址'  }
			],
			props: { key: 'id', label: 'name' },
			data: [
				{ id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' }, 
				{ id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' },
				{ id: '3', name: '王小虎3', address: '上海市普陀区金沙江路 1519 弄' },
				{ id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄'  }
			] 
		}
	}
}

可分页

<cat-table-select 
	v-model="value" 
	:data="data" 
	:columns="columns" 
	:props="p