layUI——table复杂表格单元格内显示进度条

最新推荐文章于 2023-09-15 15:55:05 发布

娜娜没有bug

最新推荐文章于 2023-09-15 15:55:05 发布

阅读量1.8k

点赞数 2

文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/malala_/article/details/127424983

版权

需求以及运行结果如图：

需求分解：

1、合并单元格

2、单元格插入进度条

HTML：

<!-- layui表格 -->
<div >
    <table class="layui-table" lay-filter="videoTable" id="videoTable"></table>
</div>

JS:

let videoData = [];        //表格数据
let colsListFalse = [];    //月份表头动态数据
// 表格渲染
function render() {
   layui.use(['table', 'element', 'layer'], function () {
      table = layui.table;
      layer = layui.layer;
      var util = layui.util;
      var element = layui.element;
      table.render({
         elem: '#videoTable',
         data: videoData,
         height: '',
         width: '100%',
         cellMinWidth: 100,
         cols: [colsListFalse],
         limit: videoData.length,    //修改组件默认的limit等于10
         done: function (res, curr, count) {
            mergeRows(res)
            element.render();
            element.progress('rate');
         }
      });
   });
}
layui.use(['table', 'element', 'layer'], function () {
   var layer = layui.layer;
   var table = layui.table;
   var util = layui.util;
   var element = layui.element;
   getTableData();                  //表格数据
   render();
});
// 这里是从别人那里拷贝来的代