form-create
form-create copied to clipboard
xaboy
点击无效
@form-create/element-ui": "^2.5.28
"element-ui": "^2.15.13"
组件表单，某些点击无效（field无重复）
<template>
<form-create :rule="rule" v-model="fApi" :option="options" />
</template>
<script>
export default {
data() {
return {
fApi: {},
options: {
onSubmit: (formData) => {
alert(JSON.stringify(formData));
},
resetBtn: true,
global: {
"*": {
props: {
size: "mini",
},
col: {
span: 6,
},
labelWidth: "125px",
},
},
},
rule: [
{
type: "input",
field: "goods_namess",
title: "委任编号",
value: "411",
},
{
type: "DatePicker",
field: "section_day1",
title: "活动日期",
value: ["2018-02-20", "2021-02-15"],
props: {
type: "datetimerange",
format: "yyyy-MM-dd HH:mm:ss",
placeholder: "请选择活动日期",
},
},
{
type: "select",
field: "cate_id1",
title: "受理点",
value: "104",
options: [
{ value: "104", label: "生态蔬菜", disabled: false },
{ value: "105", label: "新鲜水果", disabled: false },
],
},
{
type: "select",
field: "cate_id2",
title: "检测场所",
value: "104",
options: [
{ value: "104", label: "生态蔬菜", disabled: false },
{ value: "105", label: "新鲜水果", disabled: false },
],
},
{
type: "el-row",
native: true,
props: {
span: 24,
},
children: [
{
type: "el-col",
props: {
span: 6,
},
children: [
{
type: "radio",
title: "委托类型",
field: "is_postage3",
value: "0",
options: [
{ value: "0", label: "合同委托", disabled: false },
{ value: "1", label: "直接委托", disabled: true },
{ value: "2", label: "合作单位", disabled: true },
],
},
],
},
{
type: "el-col",
props: {
span: 18,
},
children: [
{
type: "input",
field: "goods_name4",
title: "合同编号",
value: "",
col: {
span: 12,
},
},
],
},
],
},
{
type: "input",
field: "goods_name5",
title: "工程编码",
value: "",
},
{
type: "input",
field: "goods_name6",
title: "施工企业代码",
value: "",
},
{
type: "input",
field: "goods_name7",
title: "监理企业代码",
value: "",
},
{
type: "input",
field: "goods_name8",
title: "委托单位",
value: "",
col: {
span: 12,
},
},
{
type: "input",
field: "goods_name9",
title: "工程名称",
value: "",
col: {
span: 24,
},
},
{
type: "select",
field: "cate_id0",
title: "工程区域",
value: "104",
options: [
{ value: "104", label: "生态蔬菜", disabled: false },
{ value: "105", label: "新鲜水果", disabled: false },
],
},
{
type: "input",
field: "goods_namea",
title: "工程地址",
value: "",
col: {
span: 12,
},
},
{
type: "radio",
title: "检验性质",
field: "is_postagex",
value: "0",
options: [
{ value: "0", label: "普通送检", disabled: false },
{ value: "1", label: "常规见证检验", disabled: false },
{ value: "2", label: "监督抽检", disabled: true },
{ value: "3", label: "监督见证检验", disabled: true },
{ value: "4", label: "执法抽检", disabled: true },
{ value: "5", label: "委托抽检", disabled: true },
],
col: {
span: 24,
},
},
{
type: "input",
field: "goods_namec",
title: "送检人",
value: "",
col: {
span: 8,
},
},
{
type: "input",
field: "goods_namxe",
title: "抽样人",
value: "",
col: {
span: 16,
},
},
{
type: "input",
field: "goods_named",
title: "见证人",
value: "",
col: {
span: 8,
},
},
{
type: "input",
field: "goods_nameg",
title: "见证卡号",
value: "",
col: {
span: 8,
},
},
{
type: "input",
field: "goods_nameh",
title: "见证人身份证",
value: "",
col: {
span: 8,
},
},
{
type: "input",
field: "goods_namej",
title: "见证单位",
value: "",
col: {
span: 8,
},
},
{
type: "input",
field: "goods_namek",
title: "监督员",
value: "",
col: {
span: 8,
},
},
{
type: "input",
field: "goods_namel",
title: "监督登录号",
value: "",
col: {
span: 8,
},
},
{
type: "input",
field: "goods_nameo",
title: "发票单位",
value: "",
col: {
span: 8,
},
},
{
type: "radio",
title: "委托来源",
field: "is_postagep",
value: "0",
options: [
{ value: "0", label: "外部委托", disabled: false },
{ value: "1", label: "内部委托", disabled: false },
],
col: {
span: 12,
},
},
],
};
},
};
</script>
<style scoped>
::v-deep .el-form-item {
margin-bottom: 0;
}
</style>
单独放置，点击效
<template>
<form-create :rule="rule" v-model="fApi" :option="options" />
</template>
<script>
export default {
data() {
return {
fApi: {},
options: {
onSubmit: (formData) => {
alert(JSON.stringify(formData));
},
resetBtn: true,
global: {
"*": {
props: {
size: "mini",
},
col: {
span: 6,
},
labelWidth: "125px",
},
},
},
rule: [
{
type: "input",
field: "goods_namess",
title: "委任编号",
value: "411",
},
],
};
},
};
</script>
<style scoped>
::v-deep .el-form-item {
margin-bottom: 0;
}
</style>
样式问题, 被row组件遮挡了, 需要自己调整一下样式或者规则 @1134506391
我复制了教程/自定义布局/使用栅格布局组件的例子是可以正常点击的，但是只要在rule数组的前面随便增加一个item,就不能点击了
问题复现
期望
不需要通过修改样式，type: el-row与其它type默认不影响
官方文档能点击
<template>
<form-create :rule="rule" v-model="fApi" :option="options"/>
</template>
<script>
export default {
data() {
return {
fApi: {},
options: {
onSubmit: (formData) => {
alert(JSON.stringify(formData))
}
},
rule: [
{
type: 'el-row',
native: true,
children: [
{
type: 'el-col',
props: {
span: 12
},
children: [
{
type: 'datePicker',
title: '活动日期',
field: 'section_day',
value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
props: {
type: 'datetimerange'
}
},
{
type: 'timePicker',
title: '活动时间',
field: 'section_time',
value: ['11:11:11', '22:22:22'],
props: {
isRange: true,
placeholder: "请选择活动时间"
}
},
]
},
{
type: 'el-col',
props: {
span: 24
},
children: [
{
type: 'inputNumber',
title: '排序',
field: 'sort',
value: 0,
props: {
precision: 2
},
col: {
span: 12
},
validate: [{require: true, type: 'number', min: 10, message:'最小为10'}]
},
{
type: 'colorPicker',
title: '颜色',
field: 'color',
value: '#ff7271',
props: {
hue: true,
format: 'hex'
},
col: {
span: 12
}
},
]
}
]
}
]
}
}
}
</script>
增加item后不能点击
<template>
<form-create :rule="rule" v-model="fApi" :option="options" />
</template>
<script>
export default {
data() {
return {
fApi: {},
options: {
onSubmit: (formData) => {
alert(JSON.stringify(formData));
},
},
rule: [
{
type: "input",
field: "goods_namess",
title: "委任编号",
value: "411",
},
{
type: "el-row",
native: true,
children: [
{
type: "el-col",
props: {
span: 12,
},
children: [
{
type: "datePicker",
title: "活动日期",
field: "section_day",
value: ["2018-02-20 12:12:12", "2018-03-20 12:12:12"],
props: {
type: "datetimerange",
},
},
{
type: "timePicker",
title: "活动时间",
field: "section_time",
value: ["11:11:11", "22:22:22"],
props: {
isRange: true,
placeholder: "请选择活动时间",
},
},
],
},
{
type: "el-col",
props: {
span: 24,
},
children: [
{
type: "inputNumber",
title: "排序",
field: "sort",
value: 0,
props: {
precision: 2,
},
col: {
span: 12,
},
validate: [
{
require: true,
type: "number",
min: 10,
message: "最小为10",
},
],
},
{
type: "colorPicker",
title: "颜色",
field: "color",
value: "#ff7271",
props: {
hue: true,
format: "hex",
},
col: {
span: 12,
},
},
],
},
],
},
],
};
},
};
</script>