表格table

功能介绍：

width值控制表格宽度；

columns与dataSource中的数据相对应，没有对应数据的地方显示为空；

columns中width设置列宽，columns中align值控制内容在表格中所处的位置；

columns中的render函数方法，可对当前数据进行处理后显示，如实例1；

columns中的render函数方法，也可设置为数据操作（编辑、查看、删除）,如实例2；

McrbHttpClient.tableDom.common({columns,dataSource,width:,ischeck,},'tableid');

获取勾选数据方法：

参数id为绑定的table的id；

McrbHttpClient.tableDom.getchecked(tableid)；

参数说明：

实例1：

                <a id='getDataBtn' style="padding: 4px 10px; background-color: #fff;border: 1px solid #ddd;border-radius: 4px;margin: 10px 0;">获取选中数据</a>
                <div id="tableDOM"></div>
                
                // table表格参数
                const columns1 = [
                    {key: 'name',title: '姓名', align: 'center',}, 
                    {key: 'age',title: '年龄',align: 'center',},
                    {key: 'job',title: '工作',align: 'center',render:function (text, data){
                            return '<span style="color:red;">'+text+'</span>'
                        }
                    },
                ];
                
                // 表格数据
                const dataSource1 = [
                    {name: '张三', age: '20', job: '经理'}, 
                    {name: '李四',age: '21', job: '总监'}, 
                    {name: '周五',age: '22', job: '实习生'},
                ]
                
                // 渲染table
                McrbHttpClient.tableDom.common({
                    columns:columns1, 
                    dataSource:dataSource1,
                    width:'100%',
                    ischeck:true,
                    },'tableDOM');
                
                // 获取选中数据
                var dataBtn = document.getElementById('getDataBtn');
                dataBtn.onclick = function(){
                    console.log('获取选中数据')
                    var ff = McrbHttpClient.tableDom.getchecked('tableDOM');
                    console.log(ff)
                }
            

效果展示：

实例2：（单元格一行溢出省略，鼠标悬浮查看全部内容）

如需单元格一行溢出省略显示，鼠标悬浮时则可查看全部信息，则需设置isAll为true且设置width。

<a id='getDataBtn2' style="padding: 4px 10px; background-color: #fff;border: 1px solid #ddd;border-radius: 4px;margin: 10px 0;">获取选中数据</a>
                <div id="tableDOM2"></div>
                
                // table表格参数
                const columns2 = [
                    {key: 'name',title: '姓名', align: 'center',isAll:true, width:'100px'}, 
                    {key: 'age',title: '年龄',align: 'center',isAll:true, width:'60px'},
                    {key: 'job',title: '工作',align: 'center',render:function (text, data){
                            return '<span style="color:red;">'+text+'</span>'
                        }
                    }, {
                        key: 'action',
                        title: '操作',
                        align: 'center',
                        render:function (text, data){
                            return McrbHttpClient.tableDom.createTool([{
                                type:'del',
                                text:'删除',
                                classname:'delBtn'
                            },{
                                type:'edit',
                                text:'修改',
                                classname:'editBtn'
                            },{
                                type:'look',
                                text:'查看',
                                classname:'lookBtn'
                            },{
                                type: 'switch',
                                text: '开关',
                            }],data,function(e,type, flag){
                                // e:点击行数据
                                // type:点击事件执行类型--删除、修改、查看
                                if(type == 'del'){
                                    console.log('删除数据：')
                                    console.log(e)
                                }else if(type == 'edit'){
                                    console.log('修改数据：')
                                    console.log(e)
                                }else if(type == 'look'){
                                    console.log('查看数据：')
                                    console.log(e)
                                } else if(type == 'switch') {
                                    if (flag) {
                                        console.log('开关on');
                                        console.log(e);
                                    } else {
                                        console.log('开关off');
                                        console.log(e);
                                    }
                                }
                            })
                        }
                    },
                ];
                
                // 表格数据
                const dataSource2 = [
                    {name: '张三', age: '20', job: '经理'}, 
                    {name: '李四',age: '21', job: '总监'}, 
                    {name: '周五',age: '22', job: '实习生'},
                ]
                
                // 渲染table
                McrbHttpClient.tableDom.common({
                    columns:columns2, 
                    dataSource:dataSource2,
                    width:'100%',
                    ischeck:true,
                    },'tableDOM2');
                
                // 获取选中数据
                var dataBtn2 = document.getElementById('getDataBtn2');
                dataBtn2.onclick = function(){
                    console.log('获取选中数据')
                    var ff = McrbHttpClient.tableDom.getchecked('tableDOM2');
                    console.log(ff)
                }

效果展示：