form-generator扩展elementUI,el-table组件

weixin_44155440

已于 2022-06-30 17:41:41 修改

阅读量1.9k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-06-30 17:30:16 首次发布

本文链接：https://blog.csdn.net/weixin_44155440/article/details/125544784

版权

本文档介绍了如何在基于ElementUI的form-generator项目中扩展表格组件。通过修改config.js，添加el-table及el-table-column配置，并在render.js、html.js和js.js中进行相应的代码更新，实现了表格功能。同时，提供了buildTableData函数来构建表格数据。

摘要由CSDN通过智能技术生成

form-generator简介

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

项目开发需要表格，目前项目中的form-generator缺少表格组件，所以需要在目前基础上扩展

config.js添加

{
    layout: 'colFormItem',
    label: '数据表格',
    tag: 'el-table',
    tagIcon: 'table',
    span: 24, // 占比
    labelWidth: 100, // 表单名称宽度
    type: 'default',
    align: 'center',
    border: true,
    maxHeight:300,
    children: [
      {
        layout: 'raw',
        tag: 'el-table-column',
        align: 'center',
        prop: 'name',
        label: '姓名'
      },
      {
        layout: 'raw',
        tag: 'el-table-column',
        align: 'center',
        prop: 'age',
        label: '年龄'
      },
      {
        layout: 'raw',
        tag: 'el-table-column',
        align: 'center',
        prop: 'sex',
        label: '性别'
      },
      {
        layout: 'raw',
        tag: 'el-table-column',
        align: 'center',
        prop: 'ah',
        label: '爱好'
      }
    ],
    data: [{
      name: '张三',
      sex: '男',
      age: '18',
      ah: '打球、游泳'
    }],

render.js添加

  'el-table': {
    'children': (h, conf, key) => {
      const list = [];
      conf.children.forEach((item,index) => {
        list.push(<el-table-column key={index} label={item.label} prop={item.prop} align={item.align} width={item.width}></el-table-column>)
      })
      return list
    }
  }

html.js添加

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

js.js添加

// 构建data
function buildTableData(scheme, dataList) {
  if (scheme.name === undefined) return
  // 主要就是这里
  if (config.tag === 'el-table') {
    dataList.push(`${scheme.name}: ${JSON.stringify(scheme.data)}`)
    return
  }

  const defaultValue = JSON.stringify(config.defaultValue)
  dataList.push(`${scheme.name}: ${defaultValue},`)
}