vue-como-table
v1.0.6
Published
基于element的vue table插件 完全支持element ui的table的所有属性和事件 并为此扩展和增强了一些功能
Downloads
19
Maintainers
como20170606Readme
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值问题