Layui Table 行号

在Layui的table组件中,可以通过设置number参数来显示行号。以下是一个简单的示例代码:

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui Table 行号示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css"  media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo'
    ,url:'/demo/table/user/' //这里是接口地址
    ,cols: [[
      {type:'numbers', title: '序号', width: 80} //设置行号列
      ,{field:'id', title: 'ID', width:80, sort: true}
      ,{field:'username', title: '用户名', width:80}
      //... 其他列定义
    ]]
    //,... 其他设置
  });
});
</script>
 
</body>
</html>

在这个示例中,我们使用了type:'numbers'来定义一个行号列。这样,在表格渲染后,每一行前面将会自动添加一个序号。

相关推荐
Asthenia04123 分钟前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj508 分钟前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中11 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略30 分钟前
web vue之状态管理Pinia
前端·javascript·vue.js
董世昌4131 分钟前
js怎样改变元素的内容、属性、样式?
开发语言·javascript·ecmascript
mosen86837 分钟前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
鸠摩智首席音效师1 小时前
如何清除 Yarn 缓存 ?
javascript
写不来代码的草莓熊2 小时前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab2 小时前
【HTML分离术】
前端·html
文心快码BaiduComate2 小时前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员