LayUI数据表格 表单参数、可编辑自定义单元格、图片、操作

前言

在使用layUI的数据表格时，常用到的一些渲染和操作

一、数据表格参数及使用

1.1 图片

templet 参数

注意：a标签也差不多，就是 href=’’/xxx.html/id={ {d.id}}"

//	{
   {d.img}} 后台返的图片地址 "d"在layui中特指data,id为templ
<script type="text/html" id="image">
        <img src='{
   {d.img}}' class="layui-table-link" style="height: 100%;display: block;">
 </script>

1.2 操作 删除、编辑按钮

lay-event=“xxx” toolbar: ‘#id’ 参数

注意：lay-event=" xxx",后续操作就是用这个 ‘xxx’

{
    field: 'wealth', title: '操作', toolbar: '#barDemo' }
<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit" style="margin-left: 12%;">编辑</a>
        <a class=" layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

1.3 单元格编辑

注意：edit: ‘text’ 现在只有text格式 具体看下面实例

{
   field: 'num', title: '数量', width:80, sort: true,edit: