Download element json scheme component - download do código-fonte element json scheme component

esquema json Formulário && Tabela, baseado em element-ui

Gere o componente de formulário e o componente de tabela do elemento ui completamente baseado no esquema json e também oferece suporte a slots personalizados.

Demonstração online de visualização ao vivo, edição online json

Uma visualização ao vivo está hospedada nas páginas gh.

Instalar

npm i element-json-scheme-component

Registro

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

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

Uso do componente Form: demonstração online de código de amostra do componente el-json-form

Deve ser vinculado manualmente: model = "xxx", basta configurá-lo como xxx:{} nos dados e precisa ser inicializado, caso contrário, elementUi reportará um erro

Uso básico:

 < 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 ;
        }
      } ) ;
    }
}

Fornece algumas APIs como formulário 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 ( )

Se os dados de opções do componente selecionado precisarem ser obtidos do back-end, você pode modificar manualmente this.formJson no montado. O método de escrita é o seguinte.

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

Para vincular itens do formulário ou definir um valor padrão, use setFieldValue().

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

Se o componente de entrada for uma pesquisa assíncrona, o método de escrita será o seguinte

 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 ( ) )
    }
}

Uso do componente Table: demonstração online de código de amostra do componente el-json-table

Uso básico:

 < 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 )
  }
}

Coluna de tabela personalizada

Basta especificar 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>