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

element

A Vue.js 2.0 UI Toolkit for Web

项目地址：https://gitcode.com/gh_mirrors/eleme/element

免费下载资源

grootblockchain

8315人浏览 · 2019-11-01 10:39:02

grootblockchain · 2019-11-01 10:39:02 发布

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

效果图

上代码：

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

<!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">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <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>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<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>

GitHub 加速计划 / eleme / element

下载

A Vue.js 2.0 UI Toolkit for Web

最近提交(Master分支：5 个月前 )

c345bb45 9 个月前

a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 9 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的