layui table如何实现点击单元格内容自动复制？或选中即复制？

layui table点击单元格复制单元格里的内容，目前加clipboard.min.js也未实现。

```html
<script src="../js/clipboard.min.js" charset="utf-8"></script>
<script src="../layui-soul-table-master/layui/layui.js"></script>
<script>
 layui.config({
    base: '../layui-soul-table-master/ext/',   // 模块目录
    version: 'v1.8.0'
  }).extend({             // 模块别名
    soulTable: 'soulTable',
    shortcut: 'shortcut',
    tableChild: 'tableChild',
    tableMerge: 'tableMerge',
    tableFilter: 'tableFilter',
    excel: 'excel'
  });
     layui.use(['jquery','form', 'table','soulTable','tableFilter'], function () {
      var table = layui.table,
      soulTable = layui.soulTable,
      tableFilter = layui.tableFilter;

    table.render({
        elem: '#myTable2'
        ,url: './data.php' //数据接口
        ,height: getContainerHtwo('#two')-12
        ,page: false
        ,cellMinWidth: 80
        ,cols: [[
            {field: 'id', title: 'ID',sort: true}
            ,{field: 'name', title: 'SN',sort: true, filter: true, templet:function (d) {
                    return '<a href="javascript:;" data-clipboard-text="" class="font-primary" title="点击复制" lay-event="copyname">'+d.name+'</a>';
      }, unresize: true, align: 'center'}
                
            ]]
        ,done: function (res,count) {
            soulTable.render(this)
        }
        ,filter: {
           bottom: false 
        }
    });
    //清空筛选
    $('#clear').click(function (obj) {    
      //if (obj.event === 'clearFilter') {
        // 清除所有筛选条件并重载表格
        // 参数: tableId
        soulTable.clearFilter('myTable2')
      //}
    });
   
    /* 表格工具条点击事件 */
    table.on('tool(myTable2)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent === 'copyname') {
                  $(".font-primary").attr("data-clipboard-text",data.name);
                  var clipboard = new ClipboardJS('.font-primary');
                  clipboard.on('success', function(e) {
                      alert('复制成功');
                      clipboard.destroy();  //解决多次弹窗
                      e.clearSelection();
                  });
         }
    });

```

别直接在表格工具条上加data-clipboard-text 属性 你这样所有.font-primary 的类都会选中，而不是当前选中的单元格
把它改成这样

return '<a href="javascript:;" data-clipboard-text="'+d.name+'" class="font-primary" title="点击复制" lay-event="copyname">'+d.name+'</a>';

最下面的 /* 表格工具条点击事件 */里边的判断条件改成这样

 var target = obj.tr.find('.font-primary')[0];
 var clipboard = new ClipboardJS(target);

其他的不用变

你可以试着在单元格的templet中，把元素的data-clipboard-text属性删除。

【以下回答由 GPT 生成】

原问题: 在点击 layui table 的单元格时，自动复制单元格内容或者选中即复制

答案:

要实现在点击table的单元格时自动复制单元格内容或者选中即复制，可以使用clipboard.js库来完成。

首先，在html文件中引入clipboard.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

然后需要在单元格点击事件中处理复制操作。根据layui的文档，可以使用table.on('tool', function(obj){})来监听表格的事件。

在监听事件中，要注意判断是单元格的点击事件，然后获取单元格的内容，并利用clipboard.js库进行复制操作。

以下是修改后的代码：

<script src="../layui-soul-table-master/layui/layui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script>
  layui.config({
    base: '../layui-soul-table-master/ext/',   // 模块目录
    version: 'v1.8.0'
  }).extend({             // 模块别名
    soulTable: 'soulTable',
    shortcut: 'shortcut',
    tableChild: 'tableChild',
    tableMerge: 'tableMerge',
    tableFilter: 'tableFilter',
    excel: 'excel'
  });
  layui.use(['jquery', 'form', 'table', 'soulTable', 'tableFilter'], function () {
    var table = layui.table,
    soulTable = layui.soulTable,
    tableFilter = layui.tableFilter;

    table.render({
        elem: '#myTable2',
        url: './data.php', //数据接口
        height: getContainerHtwo('#two') - 12,
        page: false,
        cellMinWidth: 80,
        cols: [[
            {field: 'id', title: 'ID', sort: true, templet: function(d){
              return '<span class="cell-copy">' + d.id + '</span>';
            }},
            {field: 'name', title: 'SN', sort: true, templet: function(d){
              return '<span class="cell-copy">' + d.name + '</span>';
            }},
            ...
        ]]
    });

    // 监听表格工具栏事件
    table.on('tool(myTable2)', function(obj){
      var data = obj.data;
      var layEvent = obj.event;
      if(layEvent === 'detail'){  // 详情按钮对应的事件
        // 复制单元格内容
        var text = $(this).text();
        var clipboard = new ClipboardJS('.cell-copy', {
          text: function() {
            return text;
          }
        });
        clipboard.on('success', function(e) {
          console.log('复制成功');
          e.clearSelection();
        });
        clipboard.on('error', function(e) {
          console.log('复制失败');
        });
      }
    });
  });
</script>

以上代码中，通过给单元格添加类名cell-copy，获取单元格的内容并用clipboard.js进行复制操作。如果点击单元格内容以外的区域，不会触发复制操作。

希望这个解决方案能帮到你，如果有任何问题，或者需要进一步的帮助，请随时告诉我。