ElementUI和Ant Design對比 表格對比 個人感受 一些建議和經驗

之前先接觸了ElementUI,然後後面又接觸了Ant Design，在這裏做個對比，希望通過對比這兩前端ui框架，能夠更加深入的瞭解和使用這些框架。

表格對比

    首先，通過一張表格來對比這兩框架的異同吧

對比項	ElementUI	Ant Design
logo
官網/文檔	vue: https://element.eleme.cn	vue: https://www.antdv.com/docs/vue react: https://ant.design/docs/react/introduce-cn
團隊	餓了麼	螞蟻金服
簡介	基於 Vue 2.0 的桌面端組件庫	開發和服務於企業級後臺產品
最新版本	vue: 2.13.1	vue: 1.5.3 react: 4.1.4
組件前綴	el-	a-
github	vue: https://github.com/ElemeFE/element	vue: https://github.com/vueComponent/ant-design-vue react: https://github.com/ant-design/ant-design
start/fork	vue: 44.8k/10.3k	vue: 10k/1.4k react: 58.8k/21.5k
pro版	https://github.com/PanJiaChen/vue-element-admin	https://pro.ant.design/

個人感受

    從體驗上來看：

我更加傾向於elementUI, UI上更加漂亮，使用起來更加容易上手。
一開始，我最新接觸的就是elementUI，感覺elementUI這個框架更加適合於面向外部開發。

而作爲對比的Ant Design，也有一定的優勢。
從功能上來講，後者更加齊全。比如回到頂部組件：樹形選擇：<a-tree-select />，Ant Design更加適合管理平臺的開發。

    從實用上來看：

對於pro版本，vue-element-admin允許初始化基礎版，而ant-design-pro這個初始化後有大量的例子，開發之前還得把例子刪掉，這點感覺不太好。
總之，兩個框架的pro版本做的都非常棒，但個人更加傾向於ant-design，畢竟組件多佔有非常大的優勢。

    總之：

如果是想快速上手，又希望ui更加漂亮，建議用elementUI；如追求的是比較複雜的後臺管理平臺，可以考慮採用ant-design-pro，而且ant-design-pro無論表格還是表單，都是高度可配置化的。這點相對於elementUI來說，ant-design-pro雖然稍微複雜了點，但是換來更大的便利。

一些建議和經驗

以下代碼部分都是vue，不涉及react

1. elementUI的菜單組件<el-dropdown>在手機端點擊會回彈的問題

修改trigger爲click的方式，因爲默認hover時，手機上並不能有很好的體驗。

2. elementUI如何實現通用表單的配置

採用form-create這個庫可以很方便的實現表單完全的json配置

主頁：http://www.form-create.com/
git地址：https://github.com/xaboy/form-create

另外還有一種方式，就是利用Vue的插槽實現，這種方式也適合ant-design的可配置表單的實現。

ps: 注意插槽名稱不要帶數字，最好不要

下面是利用插槽實現可配置的例子，這裏以ant-design爲例：

form.json

{
  "props": {
    "layout": "inline"
  },
  "dataSource": [
    {
      "label": "諮詢ID",
      "cmp": "Input",
      "decorator": ["qaId", { "initialValue": "" }],
      "props": {
        "allowClear": true
      }
    }
]

然後是編寫通用表單組件：
分爲兩個文件：baseForm.vue和commonForm.vue，對外使用commonForm.vue即可：

baseForm.vue

<template>
  <a-form v-bind="props" :form="form" @submit="onSubmit">
    <template v-for="item in dataSource">
      <a-form-item :key="item.key" :label="item.label">
        <slot :name="item.cmp" :item="item" :form="props.name"> </slot>
      </a-form-item>
    </template>
    <slot name="footer">
      <a-form-item label>
        <a-button type="primary" html-type="submit"> 提交 </a-button>
      </a-form-item>
    </slot>
  </a-form>
</template>
<script>
export default {
  props: {
    props: {
      type: Object,
      default() {
        return {}
      }
    },
    dataSource: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: ’base-form‘ })
    }
  },
  methods: {
    handleReset() {
      this.form.resetFields()
    },
    validate() {
      this.form.validateFields({ force: true }, () => {})
    },
    getFields() {
      return new Promise((resolve, reject) => {
        this.form.validateFields({ force: true }, (err, values) => {
          if (err) {
            reject(err)
            return
          }
          resolve(values)
        })
      })
    },
    onSubmit(e) {
      e && e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('change', values)
        }
      })
    }
  }
}
</script>

commonForm.vue

<template>
  <div v-if="dataSource.length">
    <base-form
      ref="form"
      :props="props"
      :dataSource="dataSource"
      @change="change"
    >
      <template v-slot:Input="{ item }">
        <a-input v-decorator="item.decorator" v-bind="item.props" v-on="item.events" />
      </template>
      <template v-slot:Radio="{ item }">
        <a-radio v-decorator="item.decorator" v-bind="item.props" v-on="item.events" />
      </template>
      <template v-slot:RadioGroup="{ item }">
        <a-radio-group v-decorator="item.decorator" :options="item.options" v-bind="item.props" v-on="item.events" />
      </template>
      <template v-slot:Switch="{ item }">
        <a-switch v-decorator="item.decorator" v-bind="item.props" v-on="item.events" />
      </template>
      <template v-slot:DatePicker="{ item }">
        <a-date-picker v-decorator="item.decorator" v-bind="item.props" v-on="item.events" />
      </template>
      <template v-slot:Checkbox="{ item }">
        <a-checkbox v-decorator="item.decorator" v-bind="item.props" v-on="item.events" />
      </template>
      <template v-slot:CheckboxGroup="{ item }">
        <a-checkbox-group v-decorator="item.decorator" :options="item.options" v-bind="item.props" v-on="item.events" />
      </template>
      <template v-slot:Select="{ item }">
        <a-select v-decorator="item.decorator" v-bind="item.props" :options="item.options" v-on="item.events" />
      </template>
    </base-form>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    props: {
      type: Object,
      default() {
        return {}
      }
    },
    dataSource: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    BaseForm: () => import('./BaseForm')
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    reset() {
      this.$refs.form.handleReset()
    },
    validate() {
      this.$refs.form.validate()
    },
    getFields() {
      return this.$refs.form.getFields()
    },
    isExistedSlot(name) {
      return this.registedSlot.includes(name)
    },
    change(values) {
      this.$emit('change', values)
    }
  }
}
</script>

ps: 這裏需要注意v-bind和v-on，平時我們都是用:<屬性名稱>以及@<事件名稱>，而這裏屬性和事件並不是固定的，通過v-bind="props"以及v-on="events"可以批量的不固定的設置屬性和事件

3. 關於手動文件上傳

注意，ant-design中，file對象可以通過綁定<a-upload-dragger :beforeUpload="beforeUpload" />的beforeUpload方法得到。

export default {
  methods:{
    importDoc(data, file, progress) {
           return this.$axios({
            url: '<上傳地址>',
            method: 'post',
            headers: { 'Content-Type': 'multipart/form-data' },
            onUploadProgress: function(progressEvent) {
            const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0
            progress(file, complete)
            },
            data
        })
    }
  },
upload(file){
  var formData = new FormData()
        formData.append('file', file)
        file.status = 'uploading'
        const res = await importDoc(formData, file, this.progress)
        file.status = 'success'
  }
}

4. Ant Design表單自定義組件，且支持校驗

實際上這個很好做：

export default {
  props:['value'],
  model:{ prop: 'value', event: 'change' },
  methods:{
    changeValue(value){
      this.$emit('change', value)
    }
  }
}

這裏需要注意，屬性只能是value，這樣也同時支持了value和v-model。然後假設有自定義組件demo.vue，則該表單組件可以這樣寫：

<demo v-decorator="['demo',{ 'initialValue': '', rules:[ { required: true, message: '請輸入demo' } ] }]" />

5. store文件夾下的狀態管理中，modules文件夾下所有文件的自動引入

這個可以採納vue-element-admin中的寫法：

替換strore/index.vue文件：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
// 遍歷modules文件
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})
export default store

這裏需要注意，strore/modules下的文件不一定都是狀態文件，所以可以對於value進行進一步判斷，比如說判斷value是否存在，是否有state這個屬性。