一、form-generator是什么？? ?? ???

form-generator的作者是這樣介紹的：Element UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于Element的vue項(xiàng)目中；也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。

但form-generator提供組件并不能滿足我們?cè)陧?xiàng)目中的使用，比如表格組件，el-table，子表單等等，在很多項(xiàng)目中會(huì)經(jīng)常使用到。

這里有一份專門針對(duì)form-generator擴(kuò)展ElementUI組件的專欄，代碼非常詳細(xì)，從拖拽到瀏覽再到解析器解析表單。感興趣的小伙伴可以看看。form generator擴(kuò)展組件系列

二、組件截圖(表格布局)? ?? ???

表格布局組件主要是用于一些流程表單的申請(qǐng)表一類，有助于提升后期的電子簽章和打印功能。

拖拽時(shí)的效果

運(yùn)行時(shí)的效果?

三、組件截圖(子表單)? ?? ???

1??拖拽時(shí)的效果

1??運(yùn)行時(shí)的效果

1??parser解析器效果

2??顯示模式切換(橫向or豎向)

2??切換顯示模式為豎向的效果?

?2??parser解析器效果

子表單部分的源碼,點(diǎn)此跳轉(zhuǎn)

四、組件截圖(表格)? ?? ???

下面的代碼塊是一個(gè)簡(jiǎn)單el-table的實(shí)列。你只需要在表單設(shè)計(jì)器里面需改這三個(gè)文件，運(yùn)行就能實(shí)現(xiàn)上方截圖的數(shù)據(jù)表格效果。其實(shí)有了這一個(gè)小案例，你基本上也可以擴(kuò)展出完善的element-table了。

config.js????

{
    __config__: {
      layout: 'colFormItem',
      tagIcon: 'table',
      tag: 'el-table',
      label: '數(shù)據(jù)表格',
      showLabel: false,
      children: [{
        __config__: {
          layout: 'raw',
          tag: 'el-table-column'
        },
        align: 'center',
        type: 'selection',
        width: '40'
      },
      {
        __config__: {
          layout: 'raw',
          tag: 'el-table-column'
        },
        align: 'center',
        prop: 'name',
        label: '姓名'
      },
      {
        __config__: {
          layout: 'raw',
          tag: 'el-table-column'
        },
        align: 'center',
        prop: 'age',
        label: '年齡'
      },
      {
        __config__: {
          layout: 'raw',
          tag: 'el-table-column'
        },
        align: 'center',
        prop: 'sex',
        label: '性別'
      },
      {
        __config__: {
          layout: 'raw',
          tag: 'el-table-column'
        },
        align: 'center',
        prop: 'ah',
        label: '愛好'
      }
      ]
    },
    type: 'default',
    justify: 'start',
    align: 'top',
    data: [{
      name: '張三',
      sex: '男',
      age: '18',
      ah: '打球、游泳'
    }, {
      name: '李四',
      sex: '男',
      age: '18',
      ah: '打球、游泳'
    }, {
      name: '老六',
      sex: '男',
      age: '18',
      ah: '打球、游泳'
    }],
    border: true
  }

js.js????

// 構(gòu)建data
function buildData(scheme, dataList) {
  const config = scheme.__config__
  if (scheme.__vModel__ === undefined) return
  // 主要就是這里
  if (config.tag === 'el-table') {
    dataList.push(`${scheme.__vModel__}: ${JSON.stringify(scheme.data)}`)
    return
  }
  
  const defaultValue = JSON.stringify(config.defaultValue)
  dataList.push(`${scheme.__vModel__}: ${defaultValue},`)
}

html.js????

const tags = {
  'el-table': el => {
    const {
      tag
    } = attrBuilder(el)
    let child = elTableColumn(el)
    console.log(child)
    return `<${tag} :data="${confGlobal.formModel}.${el.__vModel__}">${child}</${tag}>`
  }
}

function elTableColumn(scheme) {
  const children = []
  const config = scheme.__config__
  if (config.children.length > 0) {
    const { tag } = scheme.__config__.children[0].__config__
    config.children.forEach(ts => {
      ts.prop && children.push(`<${tag} label="${ts.label}" align="${ts.align}" prop="${ts.prop}"></${tag}>`)
    })
  }
  return children.join('\n')
}

這里是一個(gè)element-ui的基礎(chǔ)表格實(shí)例，由于表格、子表單，數(shù)據(jù)表格等擴(kuò)展涉及到的文件很多，這里就不放代碼展示了。還有很多其他的組件。如果有需要的小伙伴可以聯(lián)系我。專欄里面會(huì)包含子表單全部代碼，歡迎訂閱。

我是Etc.End。如果文章對(duì)你有所幫助，能否幫我點(diǎn)個(gè)免費(fèi)的贊和收藏??。

文章來源地址http://www.zghlxwxcb.cn/news/detail-609813.html

?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??

到了這里，關(guān)于form-generator擴(kuò)展原生表格，element-table，子表單等組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！