首页layui table表格一个列表输入两个字段

layui table表格一个列表输入两个字段

时间: 2023-06-25 22:05:43 浏览: 129

你可以使用layui的table组件来实现一个包含两个字段的表格，下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui table示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo', height: 315, url: '/demo/table/user/', //数据接口 page: true, //开启分页 cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:200}, {field: 'email', title: '邮箱', width: 300}, ]] }); }); </script> </body> </html> ``` 在上面的示例中，我们通过`cols`属性定义了表格的表头，其中`field`属性表示该列对应的数据字段名称，`title`属性表示该列的表头名称，`width`属性表示该列的宽度。在这里，我们定义了三列，分别是`ID`、`用户名`和`邮箱`，其中`ID`列的宽度为80，`用户名`列的宽度为200，`邮箱`列的宽度为300。你可以根据自己的需求来调整这些属性的值。

阅读全文