前端小白的爬坑之旅(一)

最新推荐文章于 2024-07-18 14:35:03 发布

panyiyao

最新推荐文章于 2024-07-18 14:35:03 发布

阅读量314

点赞数

文章标签： bootstrap组合表头前端若依

本文链接：https://blog.csdn.net/panyiyao/article/details/103875768

版权

作为一名刚从学校出来的实习生，我在公司的三个月里遇到了诸多挑战。在最近的福利项目中，我首次接触了若依框架，并在使用Bootstrap时遭遇了组合表头内容塌陷的问题。解决之道在于为表头添加`valign:"middle"`属性，以确保内容居中显示，最终实现了预期效果。

摘要由CSDN通过智能技术生成

刚从学校出来，进入公司实习也有三个月了。这期间遇到了非常多的坑，特地写成文章记录一下

最近在做的是关于公司福利相关的项目

第一次接触若依框架

第一个问题就是bootstrap组合表头

var options={
            code: "id",
            uniqueId: "id",
            url:prefix + "/list?startingTime="+startingTime+"&terminationTime="+terminationTime,
            height: $(window).height() - 120,
            modalName: "福利开启历史",

            columns: [
                [
                    {
                        checkbox: true,
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'id',
                        title: '序号',
                        rowspan: 2,
                        valign:"middle"

                    },
                    {
                        field: 'badge',
                        title: '工号',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'name',
                        title: '姓名',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'compName',
                        title: '公司名称',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'depName',
                        title: '部门名称',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'jobName',
                        title: '工作岗位',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'benefitStatus',
                        title: '福利缴纳状态',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'benefitCity',
                        title: '社保缴纳地区',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'accuCity',
                        title: '公积金缴纳地区',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'effectdate',
                        title: '生效日期',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'remark',
                        title: '备注',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'regbyName',
                        title: '登记人',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'regTime',
                        title: '登记时间',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'initialized',
                        title: '？确认',
                        formatter: function (value, row, index) {
                            if (row.initialized == 1) {
                                return '<i class=\"fa fa-toggle-on text-info fa-2x\" ></i> ';
                            } else {
                                return '<i class=\"fa fa-toggle-off text-info fa-2x\" ></i> ';
                            }
                        },
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'initializedbyName',
                        title: '确认人',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        field: 'initializedtime',
                        title: '确认时间',
                        rowspan: 2,
                        valign:"middle"
                    },
                    {
                        title: '公积金基数',
                        rowspan: 1,
                        colspan: 2,
                        align:"center"
                    },
                ],
                [

                    {
                        field: 'oldXvalue',
                        title: '原基数',
                        rowspan: 1
                    },
                    {
                        field: 'Xvalue',
                        title: '新基数',
                        rowspan: 1
                    }
                ],
            ]
        }

需要加上valign:"middle"不然内容会塌陷

最终效果