vform自定义右侧组件设置的数据项
这是vform的目录结构,官网有vofrm官网
主要用到表单设计器里边的东西
第一步: 假设给input组件添加一个新的数据项,就在 form-designer/setting-panel/property-editor文件夹下创建一个vue文件,其名为dataItem-editor(根据他的命名规则后边都带着editor)
在这里我用的数据项是一个下拉框选择,可以根据你自己的需求选择不用的组件(input,radio,checkbox等等),直接照着人家写好的例子复制就行。
<template>
<el-form-item :label="i18nt('designer.setting.dataItem')" v-if="selectedWidget.type === 'input'">
<el-select v-model="optionModel.dataItem">
<el-option label="." value="."></el-option>
<el-option label="-" value="-"></el-option>
<el-option label="/" value="/"></el-option>
</el-select>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
export default {
name: "dataItem-editor",
mixins: [i18n],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
computed: {
}
}
</script>
<style lang="scss" scoped>
</style>