element json scheme component
1.0.0
أنشئ مكون النموذج ومكون الجدول لعنصر واجهة المستخدم بالكامل استنادًا إلى مخطط json، كما يدعم أيضًا الفتحات المخصصة.
تتم استضافة المعاينة المباشرة على صفحات gh.
npm i element-json-scheme-component import ElJsonSchemaComponent from 'element-json-scheme-component' ;
const { ElJsonForm , ElJsonTable } = ElJsonSchemaComponent
Vue . use ( ElJsonForm ) ;
Vue . use ( ElJsonTable ) ; < 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 ;
}
} ) ;
}
} // 表单校验 方式一
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 ( ) mounted ( ) {
// 如果options是后端数据的demo, 手动修改this.formJson即可
new Promise ( ( resolve ) => {
setTimeout ( ( ) => {
this . formJson . properties . sex . options = [ {
"label" : "男1111" ,
"value" : 1
} ,
{
"label" : "女" ,
"value" : 2
} ,
]
} , 1000 )
} )
} , mounted ( ) {
// 根据后端返回详情数据设置默认值
new Promise ( ( resolve ) => {
setTimeout ( ( ) => {
this . $refs . form . setFieldValue ( 'key' , value )
} , 1000 )
} )
} , 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 ( ) )
}
} الاستخدام الأساسي:
< 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 )
}
} ما عليك سوى تحديد 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>تحتوي الصفحة الكاملة على النموذج && الجدول && ترقيم الصفحات
