本文内容参考网上多篇博客

环境和需求

• 在使用layui框架的数据表格的时候，需要的操作栏中添加修改，删除，保存等按钮。需求是点击保存按钮就不再显示修改删除两个按钮，二是显示已保存字样。
• 由于数据表格中自带刷新表格函数，使用js对html进行修改会被该函数刷新重置。所以这里提供一种方法来实现。

实现方法

首先，需要说明，这里的操作列是表格外的一列，然后添加到表格中。
这里使用layui的官网的一些例子来讲解
数据库中有一个saveFlag字段，该值来确定保存状态。这里为保存为’0’,保存为’1’。
HTML文件
在写操作列的时候，写为以下的格式，这样就可以根据数据库中的值来进行前端界面的显示。

• 其中，d为layui提供的，可以直接使用。d的作用是，在点击某行的按钮时，获取的按钮所在行的行数据。
• 具体的格式语法可以去layui的官网，模板引擎部分查看
• 语法网址：https://www.layui.com/doc/modules/laytpl.html
  

<script type="text/html" id="tableBar">
    {{#  if(d.saveFlag== "0"){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn layui-btn-normal layui-btn-xs" lay-event="archive">保存</a>
    {{#  } }}
    {{#  if(d.saveFlag== "1"){ }}
    <a class="layui-btn layui-btn-disabled layui-btn-sm" lay-event="">已保存</a>
    {{#  } }}
</script>

js文件

table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
       {field: 'id', title: 'ID'}
      ,{field: 'username', title: '用户名'}
      ,{field: 'sex', title: '性别'}
      ,{field: 'city', title: '城市'} 
      ,{field: 'sign', title: '签名'}
      ,{field: 'experience', title: '积分'}
      ,{field: 'score', title: '评分'}
      ,{field: 'classify', title: '职业'}
      ,{field: 'wealth', title: '操作', toolBar:'#tableBar'} //这里绑定操作列，
    ]]
  });

总结

以上就是全部内容，内容有很多不足之处，如果内容对你有帮助的话，可以点个赞支持一下！