vue.js element-ui組件改iview 第二期 table表單

目前公司業務太忙，項目沒來得及適配
使用的時候修改一下項目的webpack配置

實現原理

修改了element-ui源碼，把源碼裏面的table模塊提取出來
而後修改element自帶checkbox等部分組件爲iview的checkbox，而且兼容了一大堆寫法
最後修改element樣式，改成iview風格，本身也添加了一些樣式

新的table組件能夠說是element的邏輯，iview的風格

1. 部分代碼示例

僅展現部分

selection: {
    renderHeader: function(h, { store }) {
      return <Checkbox
        disabled={ store.states.data && store.states.data.length === 0 }
        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
        nativeOn-click={ this.toggleAllSelection }
        value={ this.isAllSelected } />;
    },
    renderCell: function(h, { row, column, store, $index }) {
      return <Checkbox
        nativeOn-click={ (event) => event.stopPropagation() }
        value={ store.isSelected(row) }
        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
        on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
    },

• 列表結構

• 雜言

適配的時候對源碼進行了精簡，去除了不少沒必要要的代碼，優化了代碼結構，縮小了代碼體積

使用方法

必須安裝iview

樣式風格所有替換成了ivew

功能所有按照element-ui原先同樣

npm i chu-table-iview

import ChuTable from 'chu-table-iview'
import iview from 'iview'

Vue.use(iview)
Vue.use(ChuTable)


使用文檔跟element-ui如出一轍

http://element-cn.eleme.io/#/zh-CN/component/tree

• github地址

https://github.com/CHU295/chu...

有問題聯繫做者
適配第二期，第一期修改了tree組件，更多查看我得文章