个人技术总结——使用element ui组件库的前端开发
<h2 id="技术概述"><font color="#FF7D00">技术概述</font></h2><p><strong>这个技术是做什么的？</strong></p>
<ul>
<li>Element UI一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库</li>
</ul>
<p><strong>学习该技术的原因</strong></p>
<ul>
<li>在项目beta冲刺阶段开发管理员前端需要</li>
</ul>
<p><strong>技术的难点在哪里</strong></p>
<ul>
<li>组件分类以及元素属性繁多复杂，并且相关资料较少，有时候遇到问题要花很多时间解决</li>
</ul>
<h2 id="技术详述"><font color="#FF7D00">技术详述</font></h2>
<p><strong>你是如何实现和使用该技术的</strong></p>
<ul>
<li>通览一遍官网，了解该工具的大致信息</li>
</ul>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_2006140916389.PNG"></p>
<ul>
<li>通过教程学习基本的安装、环境搭建以及各组件的使用</li>
</ul>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061409202810.PNG"></p>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061409231111.PNG"></p>
<ul>
<li>学习教程视频中的实战训练</li>
</ul>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061409280812.PNG"></p>
<ul>
<li>自己动手开发</li>
</ul>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061409300213.PNG"></p>
<h2 id="问题和解决"><font color="#FF7D00">问题和解决</font></h2>
<ul>
<li>当使用表格组件且表头的内容过长时，过多的字显得非常不美观</li>
<li>解决方法：为相应的表头元素加入show-overflow-tooltip属性，并且一定要规定width属性的大小，过长的内容就会被隐藏显示为省略号</li>
</ul>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061410273314.PNG"></p>
<ul>
<li>分页组件不能正确分页</li>
<li>解决方法：定义一个方法，当换页时会回调这个方法返回新的页码，利用新的页码向服务端请求该页数据即可实现分页。</li>
</ul>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061410483515.PNG"></p>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061410484116.PNG"></p>
<ul>
<li>点击按钮组件后不能及时刷新数据</li>
<li>解决方法：在按钮组件所触发的点击事件方法中加入向服务端请求数据的方法</li>
</ul>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061410543717.PNG"></p>
<p><img src="https://images.cnblogs.com/cnblogs_com/wyyhandsome/1660557/o_20061410544518.PNG"></p>
<h2 id="总结"><font color="#FF7D00">总结</font></h2>
<p>对于后端开发人员来说，element ui确实是一个前端开发非常容易上手而且实用的工具。正所谓活到老学到老，学习新知识、接触新技术都是我们现阶段需要做的事。当然学习的过程一定不是一帆风顺，就比如我使用的时候大大小小的问题碰到一堆，但是我们一定要先自己动手去排查错误，找出问题所在，要利用好网络资源，前辈们的博客文档都是精华。自己亲自解决错误更能加深相关问题的印象。使用vue框架加上element ui组件库能大大提高开发效率，而且通过修改主题样式也可以形成自己的风格，总之是一个非常棒的工具。</p>
<h2 id="参考文献参考博客"><font color="#FF7D00">参考文献、参考博客</font></h2>
<ul>
<li>
<p>element ui使用教程视频</p>
<pre><code>标题：适合后端编程人员的 ElementUI教程,结合SpringBoot项目案例,已完结!!!
作者：编程不良人
链接：https://www.bilibili.com/video/BV1NK4y187XH?p=20
</code></pre>
</li>
<li>
<p>正确实现分页</p>
<pre><code>标题：使用el
作者：未知
链接：https://www.dazhuanlan.com/2019/12/05/5de8af700306e/
</code></pre>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/wyyhandsome/p/13126592.html
頁:
[1]