Element-UI组件二次改造

背景 本文是将element-plus的组件提取出来作为业务使用的自定义组件，以transfer组件为例子。 对于element-ui的改造，可以看这篇 正常我们使用transfer效果如下： 当我想

项目地址：地址 演示地址，可以直观看到效果：地址 效果图：设置第二层是互斥层级（节点具有单选功能） 首先，需要了解cascader组件的底层逻辑，以父子关联、互斥层级为第二层为前提。 当用户随便点击了

现象： 我们渲染了9999条数据，由于transfer组件会一次性渲染所有数据，所以一次性渲染这么多，卡个几十秒很正常好吧。 解决transfer大数据量渲染有三种方式： 懒加载 虚拟滚动vue-vi

现象： 我们渲染了9999条数据，由于transfer组件会一次性渲染所有数据，所以一次性渲染这么多，卡个几十秒很正常好吧。所以懒加载或者分页是基本操作，方案二是分页操作。 懒加载的方式可以用EUI的

先看效果图： 已经在elementUI的仓库中提了pr，地址。 首先，想了解cascader组件的整体结构的，可以先看这篇文章。 我们魔改cascader整个组件的流程如下： 添加全选按钮，从以页面上

效果图： 已经在elementUI的仓库中提了pr，地址。 首先，想了解cascader组件的整体结构的，可以先看这篇文章。 由于使用了vue-virtual-scroll-list这个第三方组件，所

项目地址：地址。 可以点击链接，直观体验。 效果图： emmm，怎么说呢。没什么好说的。看项目的commit就能看懂。

我对element-ui（后面用eui简称）项目进行了改造，然后是一个新的eui，姑且称之为aui吧！ 这个aui只是在eui的基础上，给cascader新增了很多功能，比如这篇文章要说的cascad

项目地址：地址 可以直接访问链接来查看效果 效果图： 我做了一个ppt式网页，可以很直观的展示el-input组件的数据流。 点击链接，当页面元素全部消失后，通过不断点击页面来出现元素。 el-inp

将element-ui的组件复制出来作为自定义组件 首先我们拥有一个前端项目，然后该项目引入了element，并且注册进Vue中 这样我们就能在该项目中正常使用element-ui的组件 比如：使用级

ElementUI-select-大数据量列表渲染。筹字数筹字数筹字数筹字数筹字数筹字数筹字数筹字数

elementUI的固定列实现 根据上图，我们得知Eui的固定列是通过多渲染一个table来实现的，然后设置该table宽度为所有固定列的宽度和，然后其他的列都visibility:hidden 左固

ppt式讲解，请先等页面元素消失，鼠标再不断点击，出现元素来实现。 .

官网地址：地址 我觉得图+文字的讲解才能让人更加连贯的去理解一个东西，而ppt式：点击鼠标左键，不断出现新的图和文字能明显增加这种连贯性，能让看官更好的去理解。 点击链接，等界面元素消失后，不断点击鼠

请看官先了解vue-virtual-scroll-list这个第三方插件（3000+star），了解地址 可以通过链接直接体验 效果图： 我觉得图+文字的讲解才能让人更加连贯的去理解一个东西，而ppt