Téléchargement element json scheme component - element json scheme component Téléchargement du code source

schéma json Form && Table, basé sur element-ui

Générez le composant de formulaire et le composant de table de l'élément ui entièrement basés sur le schéma json et prenez également en charge les emplacements personnalisés.

Démo en ligne Live Preview, édition en ligne JSON

Un aperçu en direct est hébergé sur gh-pages.

Installer

npm i element-json-scheme-component

Enregistrement

 import ElJsonSchemaComponent from 'element-json-scheme-component' ;

const { ElJsonForm , ElJsonTable } = ElJsonSchemaComponent
Vue . use ( ElJsonForm ) ;
Vue . use ( ElJsonTable ) ;

Utilisation du composant Form : exemple de code du composant el-json-form, démonstration en ligne

Il doit être lié manuellement : model="xxx", définissez-le simplement sur xxx:{} dans data, et doit être initialisé, sinon elementUi signalera une erreur

Utilisation de base :

 < el-json-form : config = "formJson" : model = "formModel" ref = "form" label - width = "80px" >
  < div slot = "append" class = "submit-item" >
    < el-button type = "primary" @ click = "onSubmit" >提交</ el-button >
  </ div >
< / el-json-form>

data ( ) {
    return {
      formModel : { } ,
      formJson : {
        "formAttr" : {
          "inline" : true ,
          "label-position" : "right" ,
        } ,
        "properties" : {
          "name" : {
            "type" : "input" ,
            "label" : "活动名称" ,
            "placeholder" : "请输入..." ,
          } ,
          "search" : {
            "type" : "autocomplete" ,
            "label" : "远程搜索" ,
            "placeholder" : "请搜索..." ,
          }
        } ,
      }
    }
} ,
mothods : {
  onSubmit ( ) {
      // 调用form实例的方法demo
      // this.$refs.form.resetFields();
      this . $refs . form . validate ( ( valid , err ) => {
        if ( valid ) {
          // 打印form的values
          console . log ( 'submit!' , this . $refs . form , this . $refs . form . values ) ;
          alert ( 'submit!' ) ;
        } else {
          console . log ( 'error submit!!' , err ) ;
          return false ;
        }
      } ) ;
    }
}

Fournit certaines API comme le formulaire antd

  // 表单校验 方式一
  const values = await this . $refs . form . validateFields ( ) ;

  // 方式二
  this . $refs . form . validateFields ( ) . then ( ( values ) => {

  } ) . catch ( ( e ) => { } )
  
  // 方式三
  this . $refs . form . validate ( async ( valid , err ) => {
    if ( valid ) {
    
    } else {
      console . log ( err )
    }
  }

  // 设置表单项的值
  this . $refs . form . setFieldValue ( 'formItemKey' , value )
  // 批量设置
  this . $refs . form . setFieldsValue ( {
    'formItemKey1' , value1 ,
    'formItemKey2' , value2 ,
  } )

  // 获取表单项的值
  const values = this . $refs . form . getFieldsValue ( )

Si les données d'options du composant sélectionné doivent être obtenues à partir du backend, vous pouvez modifier manuellement this.formJson dans le monté. La méthode d'écriture est la suivante.

  mounted ( ) {
    // 如果options是后端数据的demo, 手动修改this.formJson即可
    new Promise ( ( resolve ) => {
      setTimeout ( ( ) => {
        this . formJson . properties . sex . options = [ {
            "label" : "男1111" ,
            "value" : 1
          } ,
          {
            "label" : "女" ,
            "value" : 2
          } ,
        ]
      } , 1000 )
    } )
  } ,

Pour lier des éléments de formulaire ou définir une valeur par défaut, utilisez setFieldValue(). La méthode d'écriture est la suivante.

  mounted ( ) {
    // 根据后端返回详情数据设置默认值
    new Promise ( ( resolve ) => {
      setTimeout ( ( ) => {
        this . $refs . form . setFieldValue ( 'key' , value )
      } , 1000 )
    } )
  } ,

Si le composant d'entrée est une recherche asynchrone, la méthode d'écriture est la suivante

 mounted ( ) {
    // 异步搜索demo
    this . formJson . properties . search . fetchSuggestions = ( queryString , cb ) => this . fetch ( queryString , cb )
} ,
methods: {
    fetch ( queryString , cb ) {
      if ( this . timer ) clearTimeout ( this . timer )
      this . timer = setTimeout ( ( ) => {
        cb ( [ {
          "label" : "结果1" ,
          "value" : "结果1"
        } ] )
      } , 3000 * Math . random ( ) )
    }
}

Utilisation du composant Table : exemple de code du composant el-json-table, démonstration en ligne

Utilisation de base :

 < el-json-table 
    : config = "tableJson" 
    : data = "tableData" 
    @ select = " select " >
</ el - json - table >

data ( ) {
    return {
      tableJson : {
        "columns" : [ {
            type : 'selection' ,
            width : 55
          } , {
            prop : 'name' ,
            label : 'Name' ,
            width : 80
          } , {
            prop : 'operate' ,
            label : '操作' ,
            width : 180
          }
        ]
      } ,
      tableData : [ {
          name : 'Sam'
        }
      ] ,
    }
} ,
methods: {
  select ( val ) {
    console . log ( 'select' , val )
  }
}

Colonne de tableau personnalisée

Spécifiez simplement v-slot:xxx="scope"

 < el-json-table 
  : config = "tableJson" 
  : data = "tableData" 
  @ select - all = "selectAll" >
    <!--如果要自定义table-column, 只要指定v-slot:名字, 然后像以前一样写就可以了-->
    < template v-slot : name = "scope" >
      < el-button type = "text" @ click = "openModel(scope.row)" > { { scope . row . name + '自定义row' } }
      </ el-button >
    </ template >
    
    < ! -- vue3以上才支持v - slot，3 .0以下可以这样写 -- >
    < template slot = "name" slot-scope = "scope"  >
        < el-button type = "text" @ click = "openModel(scope.row)" > { { scope . row . name + '自定义row' } }
        </ el-button >
    </ template >
    
    < template v - slot : sex = "scope" >
      < span > { { scope . row . sex === 1 ? '男' : '女' } } </ span >
    < / template>

    < template v-slot : operate = "scope" >
      < el-button type = "text" @ click = "openModel(scope.row)" >
        { { '操作1' } } </ el-button >
      < el-button type = "text" @ click = "openModel(scope.row)" > { { '操作2' } } </ el-button >
    </ template >
< / el-json-table>