layui：table中使用element，表格单元格中使用进度条

川长思鸟来 2023-06-12 08:39 303阅读 0赞

场景：列表中添加进度条；需要在table中嵌入element。table中有一个单元格是展示人员血量的值，这里向用可以变颜色的进度条来展示使其更加形象一些。

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcHRhaW5KYXZh_size_16_color_FFFFFF_t_70][]

上代码：

需要注意的几个地方以下代码中都已经标记了“\*\*\*重点\*\*\*”。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../static/lib/layui/css/layui.css"  media="all">
        
        <style>
        .memberstatus-span-left {
            font-size: 25px;
        }
        .memberstatus-span-right {
            font-size: 25px;
        }
    </style>
    </head>
    <body>
    
    <table class="layui-hide" id="test" lay-filter="test"></table>
    
    <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
    
    
    <script>
    	//***重点***：需要把使用到的layui组件table和element都引用进来
        layui.use([ 'table','element'], function(){
            var table = layui.table;
            var element = layui.element;
    
            table.render({
                elem: '#test'
                ,url:'memberStatus?search=1'    
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                //,data: []   //也可以不用url改为使用data直接传数据
                // ,autoSort: false //取消自动排序
                ,cols: [
                    [
                    // {field:'id', title: 'ID', align: 'center',sort: true}
                    ,{field:'memberName', title: '人员名称', align: 'center',sort: true} 
    				//***重点***：将队伍装换为layui图表，根据队伍值设置图标颜色
                    ,{field:'team', title: '队伍', align: 'center', sort: true,templet: function(d){
                        if(parseInt(d.team) =='1'){
                            return '<i class="layui-icon layui-icon-group" style="font-size: 30px; color: #FF5722;"></i>  '
                        }else if(parseInt(d.team)=='2') {
                            return '<i class="layui-icon layui-icon-group" style="font-size: 30px; color: #01AAED;"></i>  '
                        }else{
                            return d.team
                        }
                    }} //单元格内容水平居中
                    ,{field:'deviceCode', title: '装备编号', align: 'center',sort: true} 
                    // ***重点***：通过血量的值拼接element组件中的进度条，进度条的样式可以去layui官网找
                    ,{field:'hp', title: '血量', align: 'center',sort: true,templet: function(d){
                            //***重点***：判断颜色
                            var ys = '';
                            if(30<d.hp && d.hp<100){
                                ys='layui-bg-orange'
                            }else if(0<d.hp && d.hp<=30){
                                ys='layui-bg-red'
                            }
    						//***重点***：拼接进度条
                            return '<div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar '+ys+'" lay-percent="'+d.hp+'%"></div></div><br>'
                        }}
                    ,{field:'hitedNumber', title: '中弹数', align: 'center',sort: true}
                    ,{field:'hitNumber', title: '击中数', align: 'center',sort: true}
                    ,{field:'rePlenishBullet', title: '补弹次数', align: 'center',sort: true}
                    ,{field:'reviveNum', title: '复活次数', align: 'center',sort: true}
    
                ]
                ]
    			//***重点***：***重点***：***重点***：如果没有这一步，进度条是不会生效的。应为table渲染之后没有渲染element
                ,done:function (res,currentCount) {
    				//***重点***：table渲染完成后渲染element进度条
                    element.render()
                }
            });
    
    
        });
    
    </script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcHRhaW5KYXZh_size_16_color_FFFFFF_t_70]: /images/20230531/b2ec96f3426f4e22a5bd271122e4808b.png