layui table表格一个列表输出两个字段中的一个
时间: 2023-06-25 11:05:42 浏览: 92
可以使用 layui 的数据表格(table)的列属性(cols)中的 templet 属性来实现这个功能。
假设有以下数据:
```javascript
var data = [
{id: 1, name: '张三', type: 1},
{id: 2, name: '李四', type: 2},
{id: 3, name: '王五', type: 1},
{id: 4, name: '赵六', type: 2},
];
```
如果要在表格中只显示 type 字段,可以这样定义表格列:
```javascript
var cols = [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'type', title: '类型', templet: function(d){
return d.type == 1 ? '普通用户' : '管理员';
}}
]];
```
在这个例子中,templet 属性的值是一个函数,函数的参数 d 是当前行的数据对象。根据 type 字段的值,函数返回普通用户或管理员。
完整的代码如下:
```javascript
// 数据
var data = [
{id: 1, name: '张三', type: 1},
{id: 2, name: '李四', type: 2},
{id: 3, name: '王五', type: 1},
{id: 4, name: '赵六', type: 2},
];
// 表格列
var cols = [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'type', title: '类型', templet: function(d){
return d.type == 1 ? '普通用户' : '管理员';
}}
]];
// 渲染表格
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
data: data,
cols: cols
});
});
```
这样就可以在表格中只显示 type 字段了。
阅读全文