layui table 为单元格添加悬浮显示按钮功能

为layui table的单元格添加悬浮显示按钮的功能。因为单元格空间有限，悬浮显示的按钮可能因为单元格的overflow:hidden而显示不完整。因此建议绑定在td[data-field=‘’]元素。
但是要求按钮是具有单元格信息的。因此使用data属性，实现td[data-field=‘’]元素中，信息的传递。

    done: function(res) {
                //客户名称 → 筛选+复制
                $('td[data-field="nickname"]')
                    .append(`<div class='filter_btns'><button class='filter_btn layui-btn layui-btn-primary layui-btn-xs' style='display:none'>筛选</button>
                <button class='layui-btn layui-btn-primary layui-btn-xs copy_btn' style='display:none' data-clipboard-action="copy">复制</button></div>`)
                    .css({
                        position: 'relative'
                    })

                $('td[data-field="nickname"]').on("mouseenter", function() {
                    $(this).find('.filter_btns button').css('display', 'block')

                    $(this).find('.filter_btn').data('content', $(this).data('content'))
                    $(this).find('.copy_btn').data('name', $(this).data('content'))

                })

                //订单号 erp订单号 来源标识 → 复制
                $('td[data-field="order_sn"],td[data-field="erp_no"],td[data-field="order_sn_tag"]')
                    .append(`<div class='filter_btns'>
            <button class='layui-btn layui-btn-primary layui-btn-xs copy_btn' style='display:none' data-clipboard-action="copy">复制</button></div>`)
                    .css({
                        position: 'relative'
                    })

                $('td[data-field="order_sn"],td[data-field="erp_no"],td[data-field="order_sn_tag"]').on("mouseenter", function() {
                    $(this).find('.filter_btns button').css('display', 'block')
                    $(this).find('.copy_btn').data('name', $(this).find('.layui-table-cell').text())
                })

                //复制
                var clipboard = new ClipboardJS(document.getElementsByClassName('copy_btn'), {
                    text: function(trigger) {
                        return $(trigger).data('name')
                    }
                });
                clipboard.on('success', function(e) {
                    // layer.msg("复制成功！")
                    log('ok')
                });
                clipboard.on('error', function(e) {
                    layer.msg("对不起，您的浏览器暂不支持一键复制功能！")
                });
                //物流信息 → 创建+复制

                $('.copy_btn').click(function(e) {
                    e.preventDefault()
                    e.stopPropagation()
                })
                $('.filter_btn').click(function(e) {
                    e.preventDefault()
                    e.stopPropagation()
                    var text = $(this).data('content')
                    $('#filter_keyword').val(text)
                    getData(order_type, 'desc', 2, text)

                })
            }