Layui表格内容自动适应高度无省略号，值得你关注！

Layui表格告别内容显示不全烦恼

在网页开发中，表格是经常使用的元素，但遇到内容显示不全的问题，既影响美观，又降低用户体验。layui 作为一款强大的前端框架，为解决表格内容显示不全提供了便捷的解决方案，让你轻松实现表格内容自动适应高度，告别省略号困扰。

引入Layui

首先，需要在项目中引入layui。可以通过CDN或本地方式引入：

CDN方式：

<script src="https://cdn.layui.com/layui.js"></script>

本地方式：

1. 下载layui压缩包
2. 解压后将layui.js文件复制到项目中
3. 在HTML文件中引用该文件

<script src="layui.js"></script>

初始化表格

引入layui后，使用layui.table.render()方法初始化表格。该方法需要一个参数，即表格的配置项，包括列、数据源等属性。

layui.table.render({
  elem: '#table',
  cols: [[
    {field: 'id', title: 'ID', width: 80},
    {field: 'name', title: '姓名', width: 120},
    {field: 'age', title: '年龄', width: 80},
    {field: 'address', title: '地址', width: 200}
  ]],
  data: [
    {id: 1, name: '张三', age: 20, address: '北京市海淀区'},
    {id: 2, name: '李四', age: 25, address: '上海市浦东新区'},
    {id: 3, name: '王五', age: 30, address: '广州市天河区'}
  ]
});

设置表格高度自适应

为了实现表格内容自动适应高度，需要在表格的配置项中设置height属性为"full-row"，同时设置page属性为true。

layui.table.render({
  elem: '#table',
  height: 'full-row',
  page: true,
  cols: [[
    {field: 'id', title: 'ID', width: 80},
    {field: 'name', title: '姓名', width: 120},
    {field: 'age', title: '年龄', width: 80},
    {field: 'address', title: '地址', width: 200}
  ]],
  data: [
    {id: 1, name: '张三', age: 20, address: '北京市海淀区'},
    {id: 2, name: '李四', age: 25, address: '上海市浦东新区'},
    {id: 3, name: '王五', age: 30, address: '广州市天河区'}
  ]
});

效果展示

设置好以上配置后，表格的内容将自动适应高度，无省略号显示。

常见问题解答

Q1：如何设置表格的宽度？

layui.table.render({
  elem: '#table',
  width: 600, // 设置表格宽度为600px
  height: 'full-row',
  page: true,
  cols: [...]
});

Q2：如何控制表格的行高度？

layui.table.render({
  elem: '#table',
  height: 'full-row',
  page: true,
  cols: [...],
  rowHeight: 50 // 设置表格行高度为50px
});

Q3：如何设置表格的列宽度？

layui.table.render({
  elem: '#table',
  height: 'full-row',
  page: true,
  cols: [[
    {field: 'id', title: 'ID', width: 80},
    {field: 'name', title: '姓名', width: 150}, // 设置"姓名"列宽度为150px
    {field: 'age', title: '年龄', width: 100},
    {field: 'address', title: '地址', width: 200}
  ]]
});

Q4：如何设置表格的固定列？

layui.table.render({
  elem: '#table',
  height: 'full-row',
  page: true,
  cols: [[
    {field: 'id', title: 'ID', fixed: 'left', width: 80},
    {field: 'name', title: '姓名', width: 120},
    {field: 'age', title: '年龄', width: 80},
    {field: 'address', title: '地址', width: 200}
  ]]
});

Q5：如何设置表格的过滤功能？

layui.table.render({
  elem: '#table',
  height: 'full-row',
  page: true,
  cols: [[
    {field: 'id', title: 'ID', filter: true, width: 80},
    {field: 'name', title: '姓名', filter: true, width: 120},
    {field: 'age', title: '年龄', filter: true, width: 80},
    {field: 'address', title: '地址', filter: true, width: 200}
  ]]
});