使用Layui table时，经常会使用template、或toolbar自定义模版属性。当使用该属性自定义HTML时，layui table 单元格原有的文本超出省略号隐藏功能，在该单元格讲不会生效。
前言：首先我们先搞懂layui超出隐藏原理，table单元格只对文本格式或layui本身组件生效，自定义的html不生效。查看css、js源码 可得出，
原理：
1）文本不可折行
2）当滚动宽度大于元素外层宽度则在元素结束标签前添加,实现下拉图标展示
<div class="layui-table-grid-down" lay-event="more"><i class="layui-icon layui-icon-down"></i></div>
3）layui 又在下拉按钮上绑定事件，实现展示全部效果。
基础概念
数据返回回调事件
单元格工具事件
- 单元格工具事件「单击触发」：
table.on('tool(filter)', callback); - 单元格工具事件「双击触发」：
table.on('toolDouble(filter)', callback);
单击或双击单元格中带有 lay-event="" 属性的元素时触发。在表格主体的单元格中，经常需要进行很多的动态操作，比如编辑、删除等操作，这些均可以在单元格工具事件中完成。
<!-- 表头某列 templet 属性指向的模板 -->
<script type="text/html" id="toolEventDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<!-- 支持任意的 laytpl 组件语法，如： -->
{{# if(d.auth > 2){ }}
<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
{{# } }}
</script>
<table id="test" lay-filter="test"></table>
<!-- import layui -->
<script>
layui.use(function(){
var table = layui.table;
// 渲染
table.render({
elem: '#test',
cols: [[
{title: '操作', width: 200, templet: '#toolEventDemo'}
]]
// … // 其他属性
});
// 单元格工具事件
table.on('tool(test)', function(obj){
var data = obj.data; // 得到当前行数据
var dataCache = obj.dataCache; // 得到当前行缓存数据，包含特定字段 --- 2.8.8+
var index = obj.index; // 得到当前行索引
var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
var options = obj.config; // 获取当前表格基础属性配置项
var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.3 新增
console.log(obj); // 查看对象所有成员
// 根据 lay-event 的值执行不同操作
if(layEvent === 'detail'){ //查看
// do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('确定删除吗？', function(index){
obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
layer.close(index);
// 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
/*
table.reloadData(id, {
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
});
*/
});
} else if(layEvent === 'edit'){ //编辑
// do something
// 同步更新缓存对应的值
// 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
obj.update({
username: '123',
title: 'abc'
});
// 若需更新其他包含自定义模板并可能存在关联的列视图，可在第二个参数传入 true
obj.update({
username: '123'
}, true); // 注：参数二传入 true 功能为 v2.7.4 新增
// 当发送后端请求成功后，可再通过 reloadData 方法完成数据重载
/*
table.reloadData(id, {
scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
});
*/
}
});
});
</script>官网网址：表格组件 table - Layui 文档
弹出贴士层
layer.tips(content, elem, options);
- 参数
content: 弹出内容 - 参数
elem: 吸附的目标元素选择器或对象 - 参数
options: 基础属性配置项。#详见属性
该方法用于弹出 tips 类型贴士层（type: 4），默认 3 秒后自动关闭。
// eg1
layer.tips('小贴士', '#id');
// eg2
$('#id').on('click', function(){
var elem = this;
layer.tips('小贴士', elem); //在元素的事件回调体中，follow直接赋予this即可
});
// eg3
layer.tips('显示在目标元素上方', '#id', {
tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
}); 
官网地址：通用弹出层组件 layer - Layui 文档
个人案例：
cols内该列明确field值。field： 设置字段名。通常是表格数据列的唯一标识
{ title: '关键词', field: 'keywords', toolbar: '#keywords'},表格加载完成后循环该列，本列单元格限最大高度，超出隐藏。且鼠标经过显示下拉按钮，所以当滚动高度大于外层div高度时则需要添加下拉效果，并将点击显示弹出框事件，绑定在该div上。写法如下：
done: function (d) {
$('#message-autoMessagesPage [lay-id="message-autoMessagesTable"] .layui-table-body [ data-field="keywords"] .border-content').each(function () {
if ($(this).outerHeight() > $(this).parent().outerHeight()) {
$(this).after('<div class="layui-table-grid-down" lay-event="more"><i class="layui-icon layui-icon-down"></i></div>');
}
});
}
//关键词 弹出层
var layer = layui.layer;
table.on('tool(message-autoMessagesTable)', function (obj) {
var data = obj.data; // 得到当前行数据
var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
if (layEvent === 'more') {
let array = data.keywords.split(','); //获取到的单元格数据为字符串，将其转化为数组
let html = '<ul style="display: flex; flex-wrap: wrap;margin-right:13px">';
for (var i = 0; i < array.length; i++) {
html += '<li style="width: fit-content; line-height: 36px; padding: 0 10px; background-color: #EFF4FF; border-radius: 4px ; margin-bottom: 4px;margin-right: 4px;">' + array[i] + '</li>';
};
html += '</ul><i class="layui-icon layui-table-tips-c layui-icon-close" id="keywordsPop"></i>'; //关闭按钮
//触发弹出层
let tips=layer.tips(html, this, {
tips: [2, '#ffffff'],
time: 0,
area: ['400px', 'auto']
});
//关闭按钮绑定关闭弹出层事件
$('#keywordsPop').click(function () {
layer.close(tips);
});
};
});CSS样式
/*table 关键词 超出隐藏 更多效果 begin*/
#message-autoMessagesPage [lay-id="message-autoMessagesTable"] .layui-table-cell {
max-height: 76px;
}
#message-autoMessagesPage [lay-id="message-autoMessagesTable"] .layui-table-body [ data-field="keywords"] .layui-table-grid-down {
display:none;
}
#message-autoMessagesPage [lay-id="message-autoMessagesTable"] .layui-table-body .layui-table-hover [ data-field="keywords"] .layui-table-grid-down {
display: block;
}
/*table 关键词 超出隐藏 更多效果 end*/
