VUE layui之table数据表格使用详细说明_vue 中使用layui的table 工具栏

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
这里注意顺序和你下载的版本号!!!

四：vue页面中使用layui中的表格组件

效果图：  
 ![](https://img-blog.csdnimg.cn/3065ae654c26423fbbd6113ef26808f4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LWr5YW5L0hlcnp6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 这里只是做了引入，个人觉得layui默认表格不是很美观，后期需要进行样式的优化。


***注意：***  
 使用本地json数据注意事项（我第一次做的时候研究挺久的￣□￣｜｜）  
 一：返回的数据格式（必须返回默认格式），如图为官网截取：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/900e9b8deac3460fba1f9d3310c0af89.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LWr5YW5L0hlcnp6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 如果返回的格式不同，需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式  
 比如这样的：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4ab8f03dd7a640cab1f116079119d50d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LWr5YW5L0hlcnp6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)  
 就需要处理为：

table.render({
elem: ‘#demp’
,url: ‘’
,parseData: function(res){ //res 即为原始返回的数据
return {
“code”: res.status, //解析接口状态

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

篇幅有限，仅展示部分截图：