- Create component .vue, where props is the property configuration item of the component, and data can be obtained according to 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>
- Use custom components, ref configuration components, you can use this.$refs.editForm to get the component, you can access the data and methods exposed by the component
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, okay, of course components can also be registered in main.js and become global components