iView与element ui组件库差异大盘点(理论分析)

1:表格

ivew表格通常把表头数据放在js里面

columns: [
           {
             title: 'Name',
             key: 'name'
            },
           {
             title: 'Age',
             key: 'age'
           },
           {
             title: 'Address',
             key: 'address'
           }
         ],

而在element中通常把表头放在Html里面,element也支持将表头数据放在JS里面，但是iview是不支持直接放在Html里面的，当需要对表格内容需要进行拓展的时候得使用reader函数来解决一些问题,大部分情况下只是写法的不同并没有什么差异性，相对而言element更加丰富。

<el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

2:分页

说到表格那么分页是一个不可避免的问题,通过分页使得页面更加简洁，但分页最主要的作用还是用来处理数据异步问题，让前端在处理大数据时也不卡顿。

iview的分页相对于element更加简洁

<Page :total="40" size="small" show-elevator show-sizer />

最简单的一个分页就是一个total.

3:对话框

对话框总体而言两个组件库在功能上的区别差异不大，但相对于element而言iview的适配性更强，

element在使用上尽管把遮罩层取消但是在基础元素上并没有完全消失,在进行拓展时自我认为iview的对话框更加的简洁，使用起来更为方便。

4：树形组件

iview在树形组件继续延续了简洁方便使用的特点

<Tree :data="data"></Tree>

以上代码便能实现一个最为基本的树形结构。

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

在官方的例子中element稍微要复杂一点，element的树形结构组件会默认添加一个在选中时加入一个全行背景颜色，在iview中只会加上覆盖字体的背景颜色

在进行内容拓展上element相较于iview更为优秀，element的树形结构可以使用插槽进行自由拓展，而iview则只能通过render函数在js中进行拓展。

总结

  总而言之,iview和element各有优缺，前者在简洁性上非常优秀，而后者在拓展性上也有自己的一席之地，在进行比较大型的业务时element的使用性较高，而iview通常使用于一些中小型项目