- 创建组件.vue,其中props是该组件的属性配置项,data可以根据ref得到
<template id="sjld">
<el-form :model="formData" ref="reference" :rules="validatoRule" label-width="120px" :inline="true" >
<el-form-item label="表名" prop="name">
<el-input v-model="formData.name" auto-complete="off" />
</el-form-item>
<el-form-item label="表描述">
<el-input v-model="formData.description" />
</el-form-item>
<el-form-item label="表类型">
<el-select v-model="formData.tableType" placeholder="请选择">
<el-option
v-for="item in tableTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="表单类型">
<el-select v-model="formData.formType" placeholder="请选择">
<el-option
v-for="item in tableTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="PC表单风格">
<el-select v-model="formData.pcStyle" placeholder="请选择">
<el-option
v-for="item in tablePcStyle"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="手机表单风格">
<el-select v-model="formData.mobileStyle" placeholder="请选择">
<el-option
v-for="item in tableMobileStyle"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-tabs type="border-card">
<el-tab-pane label="数据库属性">
<el-row>
<el-button size="small" @click="addColumn">增加</el-button>
<el-button size="small" type="danger" @click="deleteColumn">删除</el-button>
</el-row>
<template>
<el-table
:data="formData.sysTableColumnList"
style="width: 100%"
@selection-change="selsChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="序号" width="65" prop="columnIndex"> </el-table-column>
<el-table-column label="字段名称" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.name" ></el-input>
</template>
</el-table-column>
<el-table-column label="字段备注" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.description"></el-input>
</template>
</el-table-column>
<el-table-column label="字段长度" width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.columnLength"></el-input>
</template>
</el-table-column>
<el-table-column label="小数点" width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.columnDecimal"></el-input>
</template>
</el-table-column>
<el-table-column label="默认值" width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.defaultValue"></el-input>
</template>
</el-table-column>
<el-table-column label="字段类型" width="150">
<template slot-scope="scope">
<el-select v-model="scope.row.columnType" placeholder="请选择">
<el-option
v-for="item in tableColumnType"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="是否主键" width="70">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.isPrimeryKey"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="允许空值" width="70">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.isAllowNull"></el-checkbox>
</template>
</el-table-column>
</el-table>
</template>
</el-tab-pane>
<el-tab-pane label="表单属性">配置管理</el-tab-pane>
</el-tabs>
</el-form>
</template>
<script>
export default {
data() {
return {
sels : []
}
},
props: {
formData:Object,
reference: Object,
validatoRule: Object,
tableColumnType: Array,
tableTypeOptions: Array,
tablePcStyle: Array,
tableMobileStyle: Array,
addColumn: Function,
deleteColumn: Function
},
methods: {
selsChange: function (sels){
this.sels = sels;
}
},
mounted(){
},
computed: {
}
}
</script>
<style >
.el-row {
line-height: 30px;
margin-bottom: 10px;
}
.el-table-column {
margin: 0px;
}
</style>
- 使用自定义组件,ref配置组件,就可以使用this.$refs.editForm得到该组件,就可以访问该组件暴露的data和method
import sysTableDetail from '../../components/sysTableDetail.vue'
components: {
'sysTableDetail': sysTableDetail
},
<sysTableDetail :formData="editForm" ref="editForm" :validatoRule="editFormRules" :tableColumnType="tableColumnType" :tableTypeOptions="tableTypeOptions" :tablePcStyle="tablePcStyle" :tableMobileStyle="tableMobileStyle" :addColumn="addColumn" :deleteColumn="deleteColumn">
</sysTableDetail>
ok,可以了,当然组件也可以注册在main.js,成为全局组件