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="props" 
	paged 
	layout="prev, pager, next" 
	:page-size="2" 
	:current-page.sync="page">
</cat-table-select>

多选表格

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

自定义row

<cat-table-select
	 v-model="value1"
	  :data="data" 
	  :columns="columns" 
	  :props="props"> 
	  <template v-slot:index="{ index }">{{ index + 1 }}</template> 
	  <template v-slot:date="{ row }">{{ showDate(row.date) }}</template>
</cat-table-select>

筛选row

<cat-table-select 
	v-model="value1" 
	:data="data" 
	:columns="columns" 
	:props="props" 
	:filter-method="filterRow" 
	filterable>
</cat-table-select>

filterRow (value, data) { 
	const reg = new RegExp(value) 
	return data.filter(item => {    return reg.test(item.name)  })
}

Api 文档

TableSelect Attributes

Columns

Props

TableSelect Events

TableSelect V-Slot