layui表格当中使用进度条笔迹

上帝也发愁

已于 2022-07-01 19:49:42 修改

阅读量890

点赞数

文章标签：大数据 layui 前端 javascript c#

于 2022-07-01 19:47:57 首次发布

本文链接：https://blog.csdn.net/u012633388/article/details/125564791

版权

最近在使用layui做项目的时候发现，前台表格中添加进度条不显示，多方查找资料后问题解决，将解决方法记录下来备忘。

 layui.use(['table', 'element'], function () {
      var table = layui.table;
      var util = layui.util;
      var element = layui.element;

      //填充表格
      table.render({
        elem: '#AllProject'
        , height: 680
        , url: '/xxx/xxx' //数据接口
        , page: true //开启分页
        , cols: [[ //表头
          { type: 'numbers', title: "序号", width: '5%' }
          , { field: 'ProjectName', title: '项目', width: '25%' }
                   , {//需要添加进度条的列
            field: 'Node', title: '当前环节', width: '10%', align: "center", templet: function () {
              var html = '<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="rate">';
              html += '<div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>';
              html += '<div>'
              return html;
            }
          }
]];
//渲染完表格后回调
        done: function () {
          element.render();
          element.progress('rate', '75%');
        }