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'来定义一个行号列。这样,在表格渲染后,每一行前面将会自动添加一个序号。

相关推荐
无奈何杨5 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭13 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆16 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼26 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子28 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆28 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了29 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆34 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js