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

CHU295發表於2018-07-10
Vue.jsUI元件View

實現原理

修改了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); } } />;
    },
複製程式碼

  • 專案結構

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

  • 雜言 適配的時候對原始碼進行了精簡，去除了很多不必要的程式碼，優化了程式碼結構，縮小了程式碼體積

##使用方法

必須安裝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-table-element_ui-to-iview

有問題聯絡作者 適配第二期，第一期修改了tree元件，更多檢視我得文章

相關文章