Layui快速入门之第七节 表格

news/2024/12/19 5:22:27/

目录

一：基本用法

基本案例：

二：静态表格

三：模板配置渲染

四：静态表格转换

五：已知数据渲染

六：自定义模板

API

渲染

一：基本用法

            表格组件 table 是 Layui 中使用率极高的一个组件，它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作，并提供了丰富的 API 用于扩展，基本涵盖了日常业务所涉及的大部分需求

基本案例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>table 组件综合演示 - Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<div style="padding: 16px;"> <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button><button class="layui-btn layui-btn-sm" id="dropdownButton">下拉按钮 <i class="layui-icon layui-icon-down layui-font-12"></i></button><button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">重载测试 <i class="layui-icon layui-icon-down layui-font-12"></i></button><button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode"><span>{{= d.lineStyle ? '多行' : '单行' }}模式</span><i class="layui-icon layui-icon-down layui-font-12"></i></button></div>
</script>
<script type="text/html" id="cityTpl"><select id="demoCity1" class="layui-border" lay-ignore><option value="浙江杭州">浙江杭州</option><option value="江西南昌">江西南昌</option><option value="湖北武汉">湖北武汉</option><option value="湖南长沙">湖南长沙</option></select>
</script>
<script type="text/html" id="barDemo"><div class="layui-clear-space"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a></div>
</script>  
<script src="/cdn.staticfile.org/layui/2.8.0/layui.js"></script>
<script>
layui.use(['table', 'dropdown'], function(){var table = layui.table;var dropdown = layui.dropdown;// 创建渲染实例table.render({elem: '#test',url:'/static/json/table/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口,toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'exports', 'print', {title: '提示',layEvent: 'LAYTABLE_TIPS',icon: 'layui-icon-tips'}],height: 'full-35' // 最大高度减去其他容器已占有的高度差,css: [ // 重设当前表格样式'.layui-table-tool-temp{padding-right: 145px;}'].join(''),cellMinWidth: 80,totalRow: true // 开启合计行,page: true,cols: [[{type: 'checkbox', fixed: 'left'},{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'},{field:'username', width:80, title: '用户'},{field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'},{field:'sex', width:80, title: '性别', sort: true},{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){// console.log(obj)// 处理该字段的导出数据var td = obj.td(this.field); // 获取当前 tdreturn td.find('select').val();}},{field:'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;', totalRow: '人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>'},{field:'experience', width: 100, title: '积分', sort: true, totalRow: '{{= d.TOTAL_NUMS }} 😊'} ,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'},{field:'ip', title:'IP', width: 120},{field:'joinTime', title:'加入时间', width: 120},{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}]],done: function(){var id = this.id;// 下拉按钮测试dropdown.render({elem: '#dropdownButton' // 可绑定在任意元素中，此处以上述按钮为例,data: [{id: 'add',title: '添加'},{id: 'update',title: '编辑'},{id: 'delete',title: '删除'}]// 菜单被点击的事件,click: function(obj){var checkStatus = table.checkStatus(id)var data = checkStatus.data; // 获取选中的数据switch(obj.id){case 'add':layer.open({title: '添加',type: 1,area: ['80%','80%'],content: '<div style="padding: 16px;">自定义表单元素</div>'});break;case 'update':if(data.length !== 1) return layer.msg('请选择一行');layer.open({title: '编辑',type: 1,area: ['80%','80%'],content: '<div style="padding: 16px;">自定义表单元素</div>'});break;case 'delete':if(data.length === 0){return layer.msg('请选择一行');}layer.msg('delete event');break;}}});// 重载测试dropdown.render({elem: '#reloadTest' // 可绑定在任意元素中，此处以上述按钮为例,data: [{id: 'reload',title: '重载'},{id: 'reload-deep',title: '重载 - 参数叠加'},{id: 'reloadData',title: '仅重载数据'},{id: 'reloadData-deep',title: '仅重载数据 - 参数叠加'}]// 菜单被点击的事件,click: function(obj){switch(obj.id){case 'reload':// 重载 - 默认（参数重置）table.reload('test', {where: {abc: '123456'//,test: '新的 test2'//,token: '新的 token2'}/*,cols: [[ // 重置表头{type: 'checkbox', fixed: 'left'},{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},{field:'sex', title:'性别', width:80, edit: 'text', sort: true},{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{= d.experience }} 分</div>'},{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true},{field:'joinTime', title:'加入时间', width:120}]]*/});break;case 'reload-deep':// 重载 - 深度（参数叠加）table.reload('test', {where: {abc: 123,test: '新的 test1'}//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标//,cols: ins1.config.cols}, true);break;case 'reloadData':// 数据重载 - 参数重置table.reloadData('test', {where: {abc: '123456'//,test: '新的 test2'//,token: '新的 token2'},scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增,height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）//,url: '404'//,page: {curr: 1, limit: 30} // 重新指向分页});break;case 'reloadData-deep':// 数据重载 - 参数叠加table.reloadData('test', {where: {abc: 123,test: '新的 test1'}}, true);break;}layer.msg('可观察 Network 请求参数的变化');}});// 行模式dropdown.render({elem: '#rowMode',data: [{id: 'default-row',title: '单行模式（默认）'},{id: 'multi-row',title: '多行模式'}]// 菜单被点击的事件,click: function(obj){var checkStatus = table.checkStatus(id)var data = checkStatus.data; // 获取选中的数据switch(obj.id){case 'default-row':table.reload('test', {lineStyle: null // 恢复单行});layer.msg('已设为单行');break;case 'multi-row':table.reload('test', {// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增lineStyle: 'height: 95px;' });layer.msg('即通过设置 lineStyle 参数可开启多行');break;}}});},error: function(res, msg){console.log(res, msg)}});// 工具栏事件table.on('toolbar(test)', function(obj){var id = obj.config.id;var checkStatus = table.checkStatus(id);var othis = lay(this);switch(obj.event){case 'getCheckData':var data = checkStatus.data;layer.alert(layui.util.escape(JSON.stringify(data)));break;case 'getData':var getData = table.getData(id);console.log(getData);layer.alert(layui.util.escape(JSON.stringify(getData)));break;case 'LAYTABLE_TIPS':layer.alert('自定义工具栏图标按钮');break;};});// 触发单元格工具事件table.on('tool(test)', function(obj){ // 双击 toolDoublevar data = obj.data; // 获得当前行数据// console.log(obj)if(obj.event === 'edit'){layer.open({title: '编辑 - id:'+ data.id,type: 1,area: ['80%','80%'],content: '<div style="padding: 16px;">自定义表单元素</div>'});} else if(obj.event === 'more'){// 更多 - 下拉菜单dropdown.render({elem: this, // 触发事件的 DOM 对象show: true, // 外部事件触发即显示data: [{title: '查看',id: 'detail'},{title: '删除',id: 'del'}],click: function(menudata){if(menudata.id === 'detail'){layer.msg('查看操作，当前行 ID:'+ data.id);} else if(menudata.id === 'del'){layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){obj.del(); // 删除对应行（tr）的DOM结构layer.close(index);// 向服务端发送删除指令});} },align: 'right', // 右对齐弹出style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式})}});// 触发表格复选框选择table.on('checkbox(test)', function(obj){console.log(obj)});// 触发表格单选框选择table.on('radio(test)', function(obj){console.log(obj)});// 行单击事件table.on('row(test)', function(obj){//console.log(obj);//layer.closeAll('tips');});// 行双击事件table.on('rowDouble(test)', function(obj){console.log(obj);});// 单元格编辑事件table.on('edit(test)', function(obj){var field = obj.field; // 得到字段var value = obj.value; // 得到修改后的值var data = obj.data; // 得到所在行所有键值// 值的校验if(field === 'email'){if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)){layer.tips('输入的邮箱格式不正确，请重新编辑', this, {tips: 1});return obj.reedit(); // 重新编辑 -- v2.8.0 新增}}// 编辑后续操作，如提交更新请求，以完成真实的数据更新// …layer.msg('编辑成功', {icon: 1});// 其他更新操作var update = {};update[field] = value;obj.update(update);});
});
</script>
</body>
</html>

二：静态表格

             静态表格是指内容已经存在于页面中的 <table class="layui-table"> 元素，且可通过一些特定属性设定不同风格   

<p>默认风格:</p>
<table class="layui-table"><colgroup><col width="150"><col width="150"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>格言</th></tr> </thead><tbody><tr><td>孔子</td><td>华夏</td><td>有朋至远方来，不亦乐乎</td></tr><tr><td>孟子</td><td>华夏</td><td>穷则独善其身，达则兼济天下</td></tr></tbody>
</table>
<p>行边框表格:</p>
<table class="layui-table" lay-skin="line"><colgroup><col width="150"><col width="150"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>格言</th></tr> </thead><tbody><tr><td>孔子</td><td>华夏</td><td>有朋至远方来，不亦乐乎</td></tr><tr><td>孟子</td><td>华夏</td><td>穷则独善其身，达则兼济天下</td></tr></tbody>
</table>
<p>列边框表格:</p>
<table class="layui-table" lay-skin="row"><colgroup><col width="150"><col width="150"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>格言</th></tr> </thead><tbody><tr><td>孔子</td><td>华夏</td><td>有朋至远方来，不亦乐乎</td></tr><tr><td>孟子</td><td>华夏</td><td>穷则独善其身，达则兼济天下</td></tr></tbody>
</table>
<p>无边框表格:</p>
<table class="layui-table" lay-skin="nob"><colgroup><col width="150"><col width="150"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>格言</th></tr> </thead><tbody><tr><td>孔子</td><td>华夏</td><td>有朋至远方来，不亦乐乎</td></tr><tr><td>孟子</td><td>华夏</td><td>穷则独善其身，达则兼济天下</td></tr></tbody>
</table>
<p>小尺寸表格:</p>
<table class="layui-table" lay-size="sm"><colgroup><col width="150"><col width="150"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>格言</th></tr> </thead><tbody><tr><td>孔子</td><td>华夏</td><td>有朋至远方来，不亦乐乎</td></tr><tr><td>孟子</td><td>华夏</td><td>穷则独善其身，达则兼济天下</td></tr></tbody>
</table>
<p>大尺寸表格:</p>
<table class="layui-table" lay-size="lg"><colgroup><col width="150"><col width="150"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>格言</th></tr> </thead><tbody><tr><td>孔子</td><td>华夏</td><td>有朋至远方来，不亦乐乎</td></tr><tr><td>孟子</td><td>华夏</td><td>穷则独善其身，达则兼济天下</td></tr></tbody>
</table>
<p>开启偶数行背景色:</p>
<table class="layui-table" lay-even><colgroup><col width="150"><col width="150"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>格言</th></tr> </thead><tbody><tr><td>孔子</td><td>华夏</td><td>有朋至远方来，不亦乐乎</td></tr><tr><td>孟子</td><td>华夏</td><td>穷则独善其身，达则兼济天下</td></tr><tr><td>庄子</td><td>华夏</td><td>朴素而天下莫能与之争美</td></tr></tbody>
</table>

三：模板配置渲染

<table class="layui-table" lay-data="{height:315, url:'/static/json/table/user.json', page:true}" id="ID-table-demo-init"><thead><tr><th lay-data="{field:'id', width:80, sort: true}">ID</th><th lay-data="{field:'username', width:80}">用户名</th><th lay-data="{field:'sex', width:80, sort: true}">性别</th><th lay-data="{field:'city'}">城市</th><th lay-data="{field:'sign'}">签名</th><th lay-data="{field:'experience', sort: true}">积分</th><th lay-data="{field:'score', sort: true}">评分</th><th lay-data="{field:'classify'}">职业</th></tr></thead>
</table>

四：静态表格转换

<div class="layui-btn-container"><button class="layui-btn" lay-on="parseTable">转换为数据表格</button>
</div>
<table lay-filter="parse-table-demo"><thead><tr><th lay-data="{field:'name', width:150}">人物</th><th lay-data="{field:'nation', width:150}">民族</th><th lay-data="{field:'maxim', minWidth: 180}">格言</th></tr> </thead><tbody><tr><td>孔子</td><td>华夏</td><td>有朋至远方来，不亦乐乎</td></tr><tr><td>孟子</td><td>华夏</td><td>穷则独善其身，达则兼济天下</td></tr><tr><td>庄子</td><td>华夏</td><td>朴素而天下莫能与之争美</td></tr></tbody>
</table>
<script>
layui.use(function(){var table = layui.table;var util = layui.util;// 事件util.on('lay-on', {parseTable: function(){// 转化静态表格table.init('parse-table-demo', {// height: ''});}});
});
</script>

五：已知数据渲染

<table class="layui-hide" id="ID-table-demo-data"></table>
<script>
layui.use('table', function(){var table = layui.table;// 已知数据渲染var inst = table.render({elem: '#ID-table-demo-data',cols: [[ //标题栏{field: 'id', title: 'ID', width: 80, sort: true},{field: 'username', title: '用户', width: 120},{field: 'sign', title: '签名', minWidth: 160},{field: 'sex', title: '性别', width: 80},{field: 'city', title: '城市', width: 100},{field: 'experience', title: '积分', width: 80, sort: true}]],data: [{ // 赋值已知数据"id": "10001","username": "张三1","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "116"}, {"id": "10002","username": "张三2","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","LAY_CHECKED": true}, {"id": "10003","username": "张三3","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "65"}, {"id": "10004","username": "张三4","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "777"}, {"id": "10005","username": "张三5","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "86"}, {"id": "10006","username": "张三6","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12"}, {"id": "10007","username": "张三7","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "16"}, {"id": "10008","username": "张三8","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "106"}]//,skin: 'line' // 表格风格//,even: true,page: true // 是否显示分页,limits: [5, 10, 15],limit: 5 // 每页默认显示的数量});
});
</script>

六：自定义模板

<table class="layui-hide" id="ID-table-demo-templet"></table>
<script type="text/html" id="ID-table-demo-templet-user"><a href="table.html" target="_blank">{{= d.username }}</a>
</script>
<script type="text/html" id="ID-table-demo-templet-switch"><!-- 这里的 checked 的状态值判断仅作为演示 --><input type="checkbox" name="status" value="{{= d.id }}" title="热|" lay-skin="switch" lay-filter="demo-templet-status" {{= d.id == 10001 ? "checked" : "" }}>
</script>
<script type="text/html" id="ID-table-demo-templet-other"><span class="layui-badge-rim" style="margin-right: 10px;">评分：{{= d.score }}</span><span class="layui-badge-rim">职业：{{= d.classify }}</span><!--<span class="layui-badge-rim">下标：{{= d.LAY_INDEX }}</span><span class="layui-badge-rim">序号：{{= d.LAY_NUM }}</span>-->
</script>
<script>
layui.use(['table'], function(){var table = layui.table;var form = layui.form;// 创建渲染实例table.render({elem: '#ID-table-demo-templet',url:'/static/json/table/user.json' // 此处为静态模拟数据，实际使用时需换成真实接口,page: true,height: '315px',cols: [[{type: 'checkbox', fixed: 'left'}// 未自定义模板的普通列,{field:'id', fixed: 'left', width:80, title: 'ID', sort: true}// 模板 - 选择器写法,{field:'username', width:80, title: '用户', templet: '#ID-table-demo-templet-user'}// 模板 - 函数写法,{field:'sex', width:60, title: '性别', templet: function(d){if(d.sex === '男'){return '<span style="color: blue">♂</span>';} else {return '<span style="color: pink">♀</span>';}}}// 模板 - 普通字符写法,{field:'city', width:115, title: '城市', templet: '<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>'}// 模板中可包含任意字段、任意内容（如表单等）,{title: '状态', width:85, templet: '#ID-table-demo-templet-switch'},{title: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}]]});// 状态 - 开关操作form.on('switch(demo-templet-status)', function(obj){var id = this.value;var name = this.name;layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);});
});
</script>

七：自定义样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>table 自定义样式 - Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet"><style>/* 自定义样式  */.layui-table-testcss .layui-table-header,.layui-table-testcss thead tr{background-color: #F8FCF9; color: #16BAAA}.layui-form-testcss > div{margin-bottom: 6px;}</style>
</head>
<body><div style="padding: 16px;"> <table class="layui-hide" id="ID-table-demo-css"></table></div><script type="text/html" id="ID-table-demo-css-user"><ul><li><strong>ID:</strong> {{= d.id }} </li><li><strong>用户:</strong> {{= d.username }} </li><li><strong>性别:</strong> {{= d.sex }} </li><li><strong>城市:</strong> {{= d.city }} </li></ul></script><script type="text/html" id="ID-table-demo-css-tool"><div class="layui-form layui-form-testcss"><div class="layui-input-wrap"><input name="AAA" value="{{= d.AAA || '' }}" lay-affix="clear" placeholder="表单 1" class="layui-input" ></div><div class="layui-input-wrap"><input name="BBB" value="{{= d.BBB || '' }}" lay-affix="clear" placeholder="表单 2" class="layui-input" ></div><div><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-css-submit">确认</button></div></div></script><script src="/cdn.staticfile.org/layui/2.8.0/layui.js"></script><script>layui.use(['table'], function(){var table = layui.table;var form = layui.form;// 创建渲染实例table.render({elem: '#ID-table-demo-css',url:'/static/json/table/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口,page: true,height: 'full-35',lineStyle: 'height: 151px;' // 定义表格的多行样式,css: [ // 直接给当前表格主容器重置 css 样式'.layui-table-page{text-align: center;}' // 让分页栏居中].join(''),className: 'layui-table-testcss' // 用于给表格主容器追加 css 类名,cols: [[{field:'username', width:160, title: '用户', templet: '#ID-table-demo-css-user'}// 设置单元格样式,{field:'sign', minWidth:100, title: '签名', style:'color: #000;'},{width:160, title: '操作', templet: '#ID-table-demo-css-tool'}]]});// 表单提交form.on('submit(demo-css-submit)', function(data){var field = data.field; // 获取表单字段值// 显示填写结果，仅作演示用layer.alert(JSON.stringify(field), {title: '当前填写的字段值'});// 此处可执行 Ajax 等操作// …return false; // 阻止默认 form 跳转});});</script>
</body>
</html>

API

API描述
var table = layui.table获得 table 模块。
table.render(options)table 组件渲染，核心方法。
table.init(filter, options)初始化渲染静态表格。
table.reload(id, options, deep)表格完整重载。
table.reloadData(id, options, deep) 2.7+表格数据重载。
table.checkStatus(id)获取选中行相关数据。
table.setRowChecked(id, opts) 2.8+设置行选中状态。
table.getData(id)获取当前页所有行表格数据。
table.cache获取表格缓存数据集（包含特定字段）。
table.resize(id)重置表格尺寸。
table.exportFile(id, data, opts)导出表格数据到本地文件。
table.getOptions(id) 2.8+获取表格实例配置项。
table.hideCol(id, cols) 2.8+设置表格列的显示隐藏属性。
table.on('event(filter)', callback)table 相关事件。

渲染

table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。

渲染方式描述
方法配置渲染通过 table 组件提供的核心方法 table.render(options) 完成的渲染。推荐
模板配置渲染通过 <table> 标签的 lay-options="{}" 属性定义模板，组件自动对其进行解析并完成渲染。
静态表格渲染对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。

http://www.ppmy.cn/news/1109481.html

相关文章

前端内存泄漏和溢出的情况以及解决办法

前端内存泄漏和溢出的情况以及解决办法

写在前面&#xff1a; 在平时写代码时&#xff0c;内存泄漏的情况会时有发生&#xff0c;虽然js有内存回收机制&#xff0c;但在平时编程中还是需要注意避免内存泄漏的情况&#xff1b;前几天做移动端时遇到一个内存泄漏造成移动端页面卡顿的问题&#xff0c;所以想总结下前端…
阅读更多...
Element--生成不定列的表格

Element--生成不定列的表格

1、对于一些场景&#xff0c;前端可能需要展示不定列数的数据&#xff1b;譬如考勤&#xff0c;可能有的人是一天一次上下班打卡&#xff0c;有的人是一天两次上下班打卡。这个时候统计就需要更具人员做不同的展示&#xff0c;不能固定在前端写死列的属性。 2、代码示例 &…
阅读更多...
Idea汉化

Idea汉化

下载IDEA官方插件包https://plugins.jetbrains.com/ 输入关键子"chinese"查询汉化包 本地安装
阅读更多...
极光笔记 | 极光服务的信创改造实践

极光笔记 | 极光服务的信创改造实践

什么是信创&#xff1f; 信创全称为“信息技术应用创新”&#xff0c;主要包含应用于通信、云计算、大数据、人工智能、工业互联网等诸多高新产业的基础技术。基础技术则包含基础硬件、基础软件、应用软件、信息安全四大板块。其中&#xff1a; 基础硬件主要包括&#xff1a;芯…
阅读更多...
Linux修复损坏的文件系统

Linux修复损坏的文件系统

如何判断文件系统是否损坏 当文件系统受损时&#xff0c;将会出现一些明显的迹象。例如&#xff0c;文件或文件夹无法访问、文件大小异常、系统启动慢或无法启动等。此外&#xff0c;系统也可能发出一些错误信息&#xff0c;如"Input/output error"、"Filesyst…
阅读更多...
实时显示当前文件夹下的文件大小，shell脚本实现

实时显示当前文件夹下的文件大小，shell脚本实现

图片来源于网络&#xff0c;如果侵权请联系博主删除&#xff01; 需求&#xff1a; 写一个shell终端命令&#xff0c;实时显示当前文件夹下的文件大小 实现&#xff1a; 您可以使用以下的Shell脚本命令来实时显示当前文件夹下的文件大小&#xff1a; while true; docleardu …
阅读更多...
2023年主流固定资管理系统的特征

2023年主流固定资管理系统的特征

随着科技的不断发展&#xff0c;固定资产管理系统也在不断演进&#xff0c;以满足企业日益增长的管理需求。在2023年&#xff0c;主流固定资产管理系统将呈现出一些重要的特征&#xff0c;包括RFID功能、低代码平台功能和云计算功能。易点易动固定资产管理系统正是结合了这些特…
阅读更多...
TCP socket UDP TCP协议 IP协议 以太网等

TCP socket UDP TCP协议 IP协议 以太网等

第 1 题&#xff08;编程题&#xff09; 题目名称&#xff1a; 编写 TCP 版本的 echo server 和 echo client 题目内容&#xff1a; 编写 TCP 版本的 echo server 和 echo client 第 2 题&#xff08;编程题&#xff09; 题目名称&#xff1a; 编写 TCP 版本的字典客户端…
阅读更多...
最新文章

Copyright @ 2022~2023