VUE layui之table数据表格使用详细说明

本是古典何须时尚 2022-09-10 07:18 560阅读 0赞

**步骤：**  
一：[layui官网下载包][layui]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
二：将解压的文件放入static文件夹（如果没有就在根目录下新建一个）  
![在这里插入图片描述][7d91dfcc884f43caa4bf92e9b2811f51.png_pic_center]  
三：public文件下index.html中引入css及js文件

<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
        
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
        这里注意顺序和你下载的版本号!!!

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

<template>
      <div class="box">
        <table id="demo" lay-filter="test"></table>
      </div>
    </template>
    
    <script> export default { data() { return { } }, methods: { }, mounted() { layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo', height: 312, width: 800, url: '/config/layuiData.json', //这里请求本地数据接口 page: true, //开启分页 cols: [[ //表头 { type:'radio'}, { field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{ field: 'username', title: '用户名', width:80} ,{ field: 'sex', title: '性别', width:80, sort: true} ,{ field: 'city', title: '城市', width:80} ,{ field: 'sign', title: '签名', width: 177} ,{ field: 'experience', title: '积分', width: 80, sort: true} ,{ field: 'score', title: '评分', width: 80, sort: true} ,{ field: 'classify', title: '职业', width: 80} ,{ field: 'wealth', title: '财富', width: 135, sort: true} ]] }); }); }, } </script>
    
    <style> .box{ margin-top: 200px; margin-left: 500px; } </style>

效果图：  
![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1][]  
这里只是做了引入，个人觉得layui默认表格不是很美观，后期需要进行样式的优化。

***注意：***  
使用本地json数据注意事项（我第一次做的时候研究挺久的￣□￣｜｜）  
一：返回的数据格式（必须返回默认格式），如图为官网截取：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
如果返回的格式不同，需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式  
比如这样的：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]  
就需要处理为：

table.render({ 
      elem: '#demp'
      ,url: ''
      ,parseData: function(res){  //res 即为原始返回的数据
        return { 
          "code": res.status, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data.item //解析数据列表
        };
      }
      //,…… //其他参数
    });

二：本地json数据存放位置  
![在这里插入图片描述][ca097f40804248f59a8a83079947fbb6.png_pic_center]  
如果没有config文件就新建，页面中直接请求即可。

[layui]: https://www.layui.com/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/635ba04f52ec474fb6f97809d90b5ff3.png
[7d91dfcc884f43caa4bf92e9b2811f51.png_pic_center]: /images/20220829/b34e56b0ac264fd2a161d5cf2a078baa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220829/16e9290965d846a5ab9abbc4a8a9c43d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220829/0ea85cc3a19a49628f42f585749a4138.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWr5YW5L0hlcnp6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20220829/e84adc86d13b479eb3df1ee63845355b.png
[ca097f40804248f59a8a83079947fbb6.png_pic_center]: /images/20220829/cd8d8478916641a3adc66960c1d6a30d.png