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

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

<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>

效果图：

这里只是做了引入，个人觉得layui默认表格不是很美观，后期需要进行样式的优化。

注意：
使用本地json数据注意事项（我第一次做的时候研究挺久的￣□￣｜｜）
一：返回的数据格式（必须返回默认格式），如图为官网截取：

如果返回的格式不同，需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式
比如这样的：

就需要处理为：

table.render({
  elem: '#demp'


### 紧跟潮流



大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/8f4634e85dd904c95364c9d62e0e9eff.png)