# table表格

# 概述

    Cap4EasyTable是一个可拓展的且内置各种操作与配置接口的table组件。支持宽高设置，序列号，选择框，
列宽可拖动，列拖拽，冻结列，操作列固定，hover颜色及点击颜色设置，水平border及垂直border显示，行
点击，列点击，自排序，列排序，数据可筛选等功能。并且可以支持大数据量显示模式（循环轮播原理）。

# 组件调用方法

import Cap4EasyTable from 'cap4-business/lib/cap4-easy-table/index.js';
 import 'cap4-business/lib/cap4-easy-table/css/cap4-easy-table.css';
 
 // 或者cli3脚手架直接引用源码（一般采用相对路径或工程内别名路径）
 import Cap4EasyTable from 'component_doc/packages/cap4-easy-table/index.js';

# 基础表格

/**/

export default {  
    data(){  
        return {  
            tableData: [],  
            msg: '',  
            columns: [],  
            tableConfig: {  
                localStorageKey: "localStorageKey_demo1",  
                bigDataModel: false,  
                columnWidthDrag: false,  
                columnPositionMove: false,  
                frozenOperationCol: false,  
                hasDropDown: false,  
                hasFrozenOeration: false,  
                titleClickChoose: false  
            }  
        }  
    },  
    mounted() {  
        window.setTimeout(() => {  
            this.tableData = [];  
            for (let i = 0; i < 10; i++) {  
                let num = i * 16;  
                this.tableData.push(  
                    {isLock:true, name:'赵伟',tel: ++num+'-'+ '156*****1987',  
                    '01':{showValue:'路飞',src:'http://open.seeyon.com/seeyon/img/group5.png'},  
                    date: {showValue: '2018-10-12',config:{backgroundColor:'green'}},  
                    tel3: 12312.56123,  
                    hobby: function (h) {  
                        return h('div', {  
                            style: ''  
                        }, '123');  
                    }, address:'上海市黄浦区金陵东路569号17楼'},  
                    {name:'李伟',tel: ++num+'-'+ '182*****1538',  
                    date: {showValue: '2018-10-11',config:{backgroundColor:'green'}},  
                    hobby:'钢琴、书法、唱歌',address:'上海市奉贤区南桥镇立新路12号2楼'},  
                    {isLock:true, name:'孙伟',tel: ++num+'-'+ '161*****0097',  
                    date: {showValue: '2018-10-01',config:{backgroundColor:'red'}},  
                    hobby:'钢琴、书法、唱歌',address:'上海市崇明县城桥镇八一路739号'},  
                    {name:'周伟',tel: ++num+'-'+ '197*****1123',hobby:'钢琴、书法、唱歌',address:'上海市青浦区青浦镇章浜路24号'},  
                    {name:'吴伟',tel: ++num+'-'+ '183*****6678',hobby:'钢琴、书法、唱歌',address:'上海市松江区乐都西路867-871号'},  
                );  
            }  
            this.columns = [];  
            for (let i = 0; i < 3; i++) {  
                const str = i === 0 ? '' : i;  
                this.columns.push(  
                    {field: 'name' + str, title: '123', isEdit: true, sortable: false, isFrozen: false, width:0,  
                        filterable: true  
                    },  
                    {field: 'tel' + str, title: '手机号码', sortable: true, filterable: true, searchable: true},  
                    {field: 'operation' + str, type: 'slot', title: '操作', width:100,  
                    },  
                    {field: '01' + str, title: '123123121313122123', type: 'img', columnAlign:'center', compute: true},  
                )  
            }  
        }, 0);  
    }  
};

/**/

# 带选择框表格

支持单选或多选

0.46574148865618836

/**/

export default {  
    data(){  
        return {  
            tableData: [],  
            filterData: [],  
            msg: '',  
            columns: [],  
            tableConfig: {  
                localStorageKey: "localStorageKey",  
                serialNumber: {  
                    show: true,  
                    textAlign: 'left'  
                },  
                selection: {  
                    show: true,  
                    isMultiple: true  
                },  
                lockable: true,  
                frozenOperationCol: true,  
                isVerticalResize: false,  
                showVerticalBorder: true,  
                defaultSort: true  
            },  
            pageData: {  
                maxPageSize: 999,  
                page: 1,  
                pageSize: 20,  
                total: 700,  
                noBoundary: true,  
                col: {  
                    isNumber: true,  
                    average: 6,  
                    number: 6,  
                    total: 6  
                }  
            },  
            // 示例用，显示触发事件  
            triggerFunctionArr: []  
        }  
    },  
    mounted() {  
        window.setTimeout(() => {  
            this.tableData = [];  
            for (let i = 0; i < 10; i++) {  
                let num = i * 16;  
                this.tableData.push(  
                    {isLock:true, name:'赵伟',tel: ++num+'-'+ '156*****1987',  
                    '01':{showValue:'路飞',src:'http://open.seeyon.com/seeyon/img/group5.png'},  
                    date: {showValue: '2018-10-12',config:{backgroundColor:'green'}},  
                    tel3: 12312.56123,  
                    hobby: function (h) {  
                        return h('div', {  
                            style: ''  
                        }, '123');  
                    }, address:'上海市黄浦区金陵东路569号17楼'},  
                    {name:'李伟',tel: ++num+'-'+ '182*****1538',  
                    date: {showValue: '2018-10-11',config:{backgroundColor:'green'}},  
                    hobby:'钢琴、书法、唱歌',address:'上海市奉贤区南桥镇立新路12号2楼'},  
                    {isLock:true, name:'孙伟',tel: ++num+'-'+ '161*****0097',  
                    date: {showValue: '2018-10-01',config:{backgroundColor:'red'}},  
                    hobby:'钢琴、书法、唱歌',address:'上海市崇明县城桥镇八一路739号'},  
                    {name:'周伟',tel: ++num+'-'+ '197*****1123',hobby:'钢琴、书法、唱歌',address:'上海市青浦区青浦镇章浜路24号'},  
                    {name:'吴伟',tel: ++num+'-'+ '183*****6678',hobby:'钢琴、书法、唱歌',address:'上海市松江区乐都西路867-871号'},  
                );  
            }  
            this.filterData = [];  
            this.columns = [];  
            for (let i = 0; i < 3; i++) {  
                const str = i === 0 ? '' : i;  
                this.columns.push(  
                    {field: 'name' + str, title: '123', isEdit: true, sortable: false, isFrozen: false, width:0,  
                        filterable: true  
                    },  
                    {field: 'tel' + str, title: '手机号码', sortable: true, filterable: true, searchable: true},  
                    {field: 'operation' + str, type: 'slot', title: '操作', width:100,  
                    },  
                    {field: '01' + str, title: '123123121313122123', type: 'img', columnAlign:'center', compute: true},  
                )  
            }  
        }, 0);  
    },  
    methods: {  
        // 列点击  
        titleClick(params) {  
            this.setTriggerFunction('列点击');  
        },  
        // 行点击  
        rowClick(params) {  
            this.setTriggerFunction('行点击');  
        },  
        // 行双击  
        rowDblclick(params) {  
            this.setTriggerFunction('行双击');  
        },  
        // 子组件回调  
        onSubComponent(params) {  
            this.setTriggerFunction('子组件');  
        },  
        // 单元格编辑回调  
        cellEditDone(params) {  
            this.setTriggerFunction('单元格');  
        },  
        // 全选  
        selectAll(params) {  
            this.setTriggerFunction('全选');  
        },  
        // 选择  
        selectChange(params) {  
            this.setTriggerFunction('选择');  
        },  
        // 排序  
        sortChange(params) {  
            this.setTriggerFunction('排序');  
        },  
        // render  
        renderSlot(slotProps) {  
            const colData = slotProps.data.data.colData;  
            const rowData = slotProps.data.data.rowData;  
            let type = colData.type;  
            return '<div>123</div>'  
        },  
        // 获取筛选数据  
        getFilterData(params) {  
            this.setTriggerFunction('筛选值');  
        },  
        // 筛选  
        filterTableContent(params) {  
            this.setTriggerFunction('筛选');  
        },  
        // 设置triggerFunction  
        setTriggerFunction(str) {  
            const key = Math.random() + str;  
            this.triggerFunctionArr.push({  
                key,  
                name: str,  
            });  
            if (this.triggerFunctionArr.length > 5) {  
                setTimeout(() => {  
                    this.triggerFunctionArr.shift();  
                });  
            }  
            setTimeout(() => {  
                let index = this.triggerFunctionArr.findIndex(item => item.key === key);  
                if (index > -1) {  
                    this.triggerFunctionArr.splice(index, 1);  
                }  
            }, 10000);  
        },  
    },  
    computed: {  
    },  
};

/**/

# Attributes

参数	说明	类型	可选值	默认值
tableData	(必选)列表数据	Array	—	[]
columns	(必选)列信息	Array	—	[]
filterData	(可选)筛选信息	Array	—	[]
width	(可选)宽度	Number	—	—
height	(可选)高度	Number	—	—
tableConfig	(可选)配置项，详细说明见下方	Object	—	{}
showLoading	(可选)是否展示加载态	Boolean	—	true
minWidth	(可选)最小列宽度	Boolean	—	63
titleRowHeight	(可选)行高	Function	—	40
isPrint	(可选)是否打印态	Boolean	—	false
printStorageInfo	(可选)打印态需要传递浏览器缓存信息	Object	—	{}
page	(可选)第几页	Number	—	1
pageSize	(可选)每页的条数	Number	—	50

# tableConfig

table配置项，用object传递减少直接传入参数

配置项	说明	类型	可选值	示例值
serialNumber	显示序号	Object	—	{show: true, textAlign: 'left'} (显示序列号，且居左显示)
selection	显示选择框	Object	—	{show: true,isMultiple: true} (显示选择框，且支持多选)
lockable	显示锁定列	Boolean	true/false	true
isHorizontalResize	水平自适应	Boolean	true/false	true
isVerticalResize	垂直自适应	Boolean	true/false	true
columnWidthDrag	列宽可拖动	Boolean	true/false	true
columnPositionMove	列位置可拖拽	Boolean	true/false	true
frozenOperationCol	右侧固定操作列	Boolean	true/false	true
localStorageKey	localStorage缓存key	String	—	'localStorageKey' (使用唯一值)
rowHoverColor	行hover颜色	Boolean	—	'#F5F5F5'
titleBgColor	列头背景色	Boolean	—	true
operationBgColor	固定操作列背景色	Boolean	—	true
titleHoverColor	列头hover颜色	Boolean	—	true
rowClickColor	行点击选中色	Boolean	—	true
showHorizontalBorder	显示水平border	Boolean	true/false	true
showVerticalBorder	显示垂直border	Boolean	true/false	true
defaultSort	自排序	Boolean	true/false	true
titleRowHeight	行高	Boolean	—	true
bigDataModel	大数据量模式	Boolean	true/false	true
hasDropDown	显示下拉框	Boolean	true/false	true
titleClickSort	列头点击排序	Boolean	true/false	true
titleClickChoose	列点击可选中	Boolean	true/false	true
rowClickUncheck	行重复点击取消选中	Boolean	true/false	true

# col配置项属性

配置项	说明	类型	可选值	示例值
filterable	可筛选	Boolean	true/false	true
searchable	筛选可搜索	Boolean	true/false	true
sortable	可排序	Boolean	true/false	true
isFrozen	被冻结	Boolean	true/false	true
width	初始列宽度	Number	-	100
field	key	String	-	'field01'
type	类型	String	'render'/'slot'/'normalText'/'normalObjText'(.v)/'normalObjectText(.value)'	'normalText'
componentName	以组件加载	String	-	-

# Event

事件名称	说明	回调参数
titleClick	列点击触发	列信息
titleUnClick	列重复点击触发	—
rowClick	行点击触发	行信息
onSubComponent	子组件触发	—
cellEditDone	td编辑触发	—
selectAll	全选时触发	—
selectChange	选择项改变触发	—
sortChange	列排序触发	—
getFilterData	列筛选获取数据触发	—
filterTableContent	列筛选触发	—

编撰人：yinyanting

快速跳转

table表格

← 3.6.3 业务组件介绍 (2) 分页组件 →