总结使用Element-ui用到的小技巧（InfiniteScroll滚动分页、el-tree单选的树状结构选项、表格循环表头表体、el-input远程搜索等等）

置顶 swagLi

已于 2024-04-26 14:15:30 修改

阅读量3k

点赞数

分类专栏： vue、elementUI、音视频通信、echarts实战文章标签： el-table当表头和表体不确定时 el-tree InfiniteScroll el-input远程搜索

于 2019-06-21 14:25:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41149508/article/details/93191038

版权

vue、elementUI、音视频通信、echarts实战专栏收录该内容

25 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文总结了使用Element-ui的一些实用技巧，包括实现InfiniteScroll滚动分页，el-tree单选功能，动态处理表格的表头和表体，以及el-input的远程搜索功能。同时，文章还提到了el-tree的配置注意事项，如node-key和check-strictly属性的设置，以及多选操作的封装和使用。此外，还展示了如何限制日期范围的选择，并引入了moment库进行日期处理。最后，提到了在使用steps组件时如何在步骤中显示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`一、利用InfiniteScroll做个消息列表的滚动分页`

<templete>
   <div class="infinite-list"  v-infinite-scroll="load"  infinite-scroll-disabled="loading"  style="overflow:auto">
              <div v-for="(temp,index) in msglist" :key="index" class="infinite-list-item" @click="look(temp)" >
                  <div class="time"><p>{
  {temp.orderPayTime}}</p></div>
                  <div class="cont">用户{
  {temp.userName}}，牌号{
  {temp.signNo}}，在线上支付一笔拍品订单，订单包含 {
  {temp.orderLotInfo}}</div>
                  <div sty