Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue-como-table

como2017060620ISC1.0.6

基于element的vue table插件 完全支持element ui的table的所有属性和事件 并为此扩展和增强了一些功能

vue-table, table, element, ui, easy-table

readme

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值问题