vue-como-table

• 基于element ui table的二次封装
• 依赖element ui

安装

npm install vue-como-table

示例

//一、在main.js 引入
import comoTable from 'vue-como-table';
import 'vue-como-table/vue-como-table.css';
Vue.use(comoTable)

<vue-como-table  ref="table_szjcomo" :config="config" @size-change="sizeChange" @page-current-change="pageCurrentChange" @cell-edit="inputEditHandle" @switch-change="switchChangeHadle" @tag-click="tagClickHandle">
	<el-table-column  fixed="right"  label="操作"  align="center"  width="170" slot="actions">
		<template slot-scope="scope">
			<el-button size="mini" type="warning">编辑</el-button>
			<el-button type="danger" size="mini">删除</el-button>
		</template>
	</el-table-column>
</vue-como-table>

export default {
	data() {
		let that = this;
		return {
			currPage:1,
			pageLimit:30,
			config:{
				cols:that.getCols(),
				defaultToolbar:['export','print'],
				//特别说明 除了导出和打印功能外，还可以自定义默认工具
				//示例如下 ['export','print',{icon:'xxx',title:'提示说明',event:'cusEvent'}]
				//温馨提示:icon图标只支持element ui的图标库
				page:{currentPage:that.currPage,pageSize:that.pageLimit,total:0},
				data:[],
				attr:{border:true}，
				width:'100%'
			},
		};
	}，
	methods:{
        /**
         * [inputEditHandle 表单编辑]
         * @author    szjcomo
         * @date           2020-10-26
         * @param  {[type]}     value [description]
         * @param  {[type]}     field [description]
         * @param  {[type]}     row   [description]
         * @return {[type]}           [description]
         */
        inputEditHandle:function(value,field,row) {
            console.log(value,field,row);
        },
        /**
         * [switchChangeHadle 开关事件]
         * @author    szjcomo
         * @date           2020-10-26
         * @param  {[type]}     value [description]
         * @param  {[type]}     field [description]
         * @param  {[type]}     row   [description]
         * @return {[type]}           [description]
         */
        switchChangeHadle:function(value,field,row) {
            console.log(value,field,row);
        },
        /**
         * [tagClickHandle 标签事件]
         * @author    szjcomo
         * @date           2020-10-26
         * @param  {[type]}     value [description]
         * @param  {[type]}     field [description]
         * @param  {[type]}     row   [description]
         * @return {[type]}           [description]
         */
        tagClickHandle:function(value,field,row) {
            console.log(value,field,row);
        },
		getCols:function() {
			return [
				{label:'序号',type:'selection',align:'center',fixed:'left'},
				{label:'头像',prop:'head_image',align:'center',type:'image',options:{
					alt:'用户头像',formatter:function(value,row){
						return value;
					}
				}},
				{label:'姓名',prop:'uname',align:'center',width:80,showOverflowTooltip:true,edit:true},
				{label:'性别',prop:'gender',align:'center',width:80,showOverflowTooltip:true,edit:true},
				{label:'手机号码',prop:'call_phone',align:'center',width:120,
				showOverflowTooltip:true,edit:true},
				{label:'身份证号',prop:'idcardno',align:'center',width:150,showOverflowTooltip:true},
				{label:'是否付费',prop:'is_pay',align:'center',width:80,showOverflowTooltip:true,type:'icon',
				options:{
					formatter:function(value,row) {
						if(value) return 'el-icon-success';
						return 'el-icon-error';
					},
					style:function(value,row) {
						if(value) return {color:'#02c367',fontSize:'20px'};
						return {color:'red',fontSize:'20px'};
					}
				}},
				{label:'学生类型',prop:'student_type',align:'center',width:150,showOverflowTooltip:true,
				formatter:function(row, column, cellValue, index){
					if(row.student_type == 0 && row.midden_exam == 0) {
						return '应届生(未参加)';
					} else if(row.student_type == 0 && row.midden_exam == 1) {
						return '应届生(参加)';
					} else {
						return '往届生';
					}
				}},
				{label:'第一志愿',prop:'specialty_name',align:'center',width:100,showOverflowTooltip:true},
				{label:'第二志愿',prop:'specialty_second_name',align:'center',width:100,
				showOverflowTooltip:true},
				{label:'报名进度',prop:'status_id',align:'center',width:120,showOverflowTooltip:true,
				type:'progress',options:{
					attr:function(value,row) {
						if(value == 1) {
							return {percentage:30,showText:false};
						} else if(value == 2) {
							return {percentage:40,status:'warning',showText:false};
						} else if(value == 3) {
							return {percentage:80,status:'exception',showText:false};
						} else if(value == 4) {
							return {percentage:100,status:'success',showText:false};
						} else if(value == 5) {
							return {percentage:40,status:'warning',showText:false};
						} else {
							return {percentage:0,showText:false};
						}
					}
				}},
				{label:'报名状态',prop:'status_desc',align:'center',width:120,showOverflowTooltip:true,type:'tag',options:{
					attr:function(value,row) {
						if(row.status_id == 4) {
							return {size:'small',type:'success',effect:'dark'};
						} else if(row.status_id == 6) {
							return {size:'small',type:'info'};
						}
							return {size:'small',type:'warning',effect:'dark'};
						}
					}
				},
				{label:'服从调剂',prop:'is_deploy',align:'center',width:100,showOverflowTooltip:true,type:'switch'},
				{label:'所在地址',prop:'address',showOverflowTooltip:true,minWidth:300},
				{label:'家长姓名',prop:'parent_uname',showOverflowTooltip:true,width:80,align:'center'},
				{label:'家长电话',prop:'parent_phone',showOverflowTooltip:true,width:120,align:'center'},
				{label:'报名时间',prop:'delete_time',showOverflowTooltip:true,width:160,align:'center'},
				{slot:'actions',label:'操作'}
			];
		}
	}
}

表格属性

• 完全支持element ui table组件的所有属性

表格事件

原生事件 （table-events）

事件名	说明	参数
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection
cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
cell-dblclick	当某个单元格被双击击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, column, event
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, column, event
row-dblclick	当某一行被双击时会触发该事件	row, column, event
header-click	当某一列的表头被点击时会触发该事件	column, event
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
filter-change	当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。	filters
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event
expand-change	当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）	row, (expandedRows , expanded)

---

分页事件（table-events）

事件名	说明	参数
size-change	分页中每页条数发生改变时	value 当前条数
page-current-change	当前页发生改变时会触发	value 当前页
prev-click	用户点击上一页	value 当前页
next-click	用户点击下一页	value 当前页

---

其它事件 (table-events)

事件名	说明	参数
cell-edit	单元格编辑事件	value,field,row
switch-change	switch开关改变事件	value,field,row
tag-click	标签点击事件	value,field,row
next-click	用户点击下一页	value 当前页

---

表格方法

原生方法 (table-methods)

事件名	说明	参数
clearSelection	用于多选表格，清空用户的选择	-
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
toggleAllSelection	用于多选表格，切换所有行的选中状态	-
toggleRowExpansion	用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）	row, expanded
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
clearSort	用于清空排序条件，数据会恢复成未排序的状态	-
clearFilter	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件	columnKey
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法	-
sort	手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。	prop: string, order: string

扩展方法 (table-methods)

事件名	说明	参数
getColumns	获取表格所有列名	-
exportTable	导出表格所有数据，可自定义导出	columns,data,filename,autoWidth,cusTitle,options
printTable	打印表格	id 表格ID

---

Table-column Scoped Slot

名称	说明
-	自定义列的内容，参数为 { row, column, $index }
header	自定义表头的内容. 参数为 { column, $index }

---

表格 Slot

名称	说明
table-filter	自定义表头条件筛选
toolbar-custom	自定义表头工具集
page-bar-custom	自定义底部分页工具集

编译打包

npm run vue-como-table

更新日志

2020年10月11日

• 修复了图片加载失败的信息提示 默认无信息提示
• 优化编译后体积,编译后缩小了80% 现在编译后不到1M

2020年10月26日

• 修正edit事件触发时间,增加switch、tag的字段名

2021年3月12日

• 增加自定义工具的文字显示功能 修复数据导出自动计算列宽的bug 修复数据导出null值问题