1. 首页
  2. IT资讯

elementUI总结

项目使用elementUI, 一些业务要求elementUI不支持, 通过其他变相方式实现, 再次分享一下

tree 树形控件

  • 实现单个节点下的数据刷新
    • 清除子节点数据, 通过getNode()获取节点数据, 将节点数据的childNodes数组清空.或者所有子节点调用调用remvoe()方法, 实现清空节点数据
    • 请求最新的节点数据, 节点调用append()方法, 将最新节点添加到节点下
  • 实现节点的双击事件
    • elementUI tree节点的事件没有节点的双击事件, 可通过使用scoped slot的方式渲染节点, 绑定原生的双击事件
<el-tree       :data="data"       show-checkbox       node-key="id">       <span slot-scope="{ node, data }">         <span @dblclick="dblclickHandler(data)">{{ node.label }}</span>       </span>     </el-tree>
  • 懒加载实现整体tree的数据刷新
    • elementUI没有提供destroy或者refresh的方法.
    • 通过给<el-tree></el-tree>设置v-if指令,v-if的值由false变为ture时, load的方法会重新执行
<el-tree          v-if-"refreshTree"          lazy          :load="loadFunction">     ........ </el-tree> <script> export default {     name: "componentName",     data(){         return {             refreshTree: true         }     },     methods: {         loadFunction(){             // 加载节点方法         },         triggerThisMethodsRealizeRefresh(){             this.refreshTree = false;             setTimeout(() => {                 this.refreshTree = true;             }, 100)         }     } } </script>
  • 懒加载模式下, 实现节点分页加载
    • 由于节点下子节点过多, 可能达到几万, 一次全部加载会很慢, 故采用加载更多的方案
    • 后台对请求节点数据的接口进行分页, 前端根据返回值信息, 判断是否存在更多数据, 如存在更多数据, 在返回的节点中, push一个节点, 节点名称为 "加载更多", 并在节点上存储必要的信息(用于请求下一页)
    • tree节点注册点击事件, 点击时判断节点是否为加载更多的节点, 如果是, 将此节点移除, 并请求下一页数据, 数据返回后, 将节点通过append()方法, 追加到节点下.
    • 大致代码
<el-tree          lazy          @node-click="handleNodeClick"          :load="loadFunction">     <span slot-scope="{ node, data }">         <span>{{node.label}}</span>     </span> </el-tree> <script> export default {     name: "componentName",     data(){         return {             refreshTree: true         }     },     methods: {         loadFunction(resolve){             // 加载节点方法, 并判断是否存在下一页              if(res.data.currentPage !== res.data.totalPage){                 nodeList.push({                     label:"加载更多",                     id:node.data.id + "1",                     isLoadMoreNode: true,                     pid:node.data.id,                     index: res.data.currentPage,                     pNode: node.data,                     isParent: false,                 });             }             resolve(nodeList);         },         handleNodeClick(data, node){             if(!data.isParent && data.isLoadMoreNode){                 // 请求下一页数据, pageIndex为 data.index, 父节点数据为data.pNode                 // 调用append方法将返回数据追加到父节点下, 在此也要判断是否存在更多数据             }         }     } } </script>

table表格

  • 如果表格的滚动条不使用原生的滚动条, 使用其他第三方(niceScroll.js), 需修改elementUI的代码,在elementUI的代码中
    • 通过检查浏览器中滚动条的宽度, 设置表格整体的宽度,
    • 通过监测是否存在滚动条,给表格多添加一列, 用于放置原生滚动条
    • 修改方式
      • 将计算滚动条的宽度置为0, 保证表格整体宽度
      • 将检测是否存在滚动条的方法 返回false
      • 可通过<el-table></el-table>配置传入参数方式实现, 也可以直接修改固定写死, 参数方式会更灵活一些
// 直接修改的形式 // table.vue计算table宽度的函数中, 将utils.js中计算的滚动条的宽度减去 // 修改前 bodyWidth() {     const { bodyWidth, scrollY, gutterWidth } = this.layout;     return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : ''; } // 修改后 bodyWidth() {     const { bodyWidth, scrollY } = this.layout;     return bodyWidth ? bodyWidth - (scrollY ? 0 : 0) + 'px' : ''; } // table-header.js中, 将判断是否有滚动条的函数, 始终返回false. // 修改前 hasGutter() {     return !this.fixed && this.tableLayout.gutterWidth; } // 修改后 hasGutter() {     return false; } // table-footer.js中, 将判断是否有滚动条的函数, 始终返回false. // 修改前 hasGutter() {     return !this.fixed && this.tableLayout.gutterWidth; } // 修改后 hasGutter() {     return false; } 
  • 修改elementUI代码并重新发布的官方指南地址 elementUI贡献指南

select 下拉选择框

  • select的下拉框的远程数据, 不支持滚动加载
    • 检测滚动到底部, 发送请求数据, 返回数据和原有数据连接

dialog 对话框

  • dialog对话框中嵌入form表单, 点击el-select下拉框时, 整体的dialog对话框会颤抖一下
    • 出现情况, 一般是修改了class为el-dialog的div的定位方式, 由relative修改为absolute
    • 解决方式有两个, 第一个是给class为el-dialog的div固定高度, 第二个是将absolute修改为fixed

原文始发于:elementUI总结

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/25665.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code