代码拉取完成,页面将自动刷新
子表单中自定义组件无法通过value属性拿到值(主表单中可以),如下图:
代码如下:
column: [
{
label: "关键字",
prop: "KeyWord",
display: false, //不展示
hide: true, //列表不展示
addDisplay: false, //表单新增时不展示
editDisplay: false, //表单编辑时不展示
search: true,
searchOrder: 1,
},
{
label: "状态",
prop: "IsAudit",
span: 24,
row: true, //是否单独成行
component: "acSelect",
params: {
type: "radio",
dataType: "audit",
},
rules: [
{
required: true,
message: "必填",
trigger: "blur",
},
],
},
{
label: "名称",
prop: "Name",
span: 24,
sortable: true,
rules: [
{
required: true,
message: "必填",
trigger: "blur",
},
],
},
{
label: "排序号",
prop: "IndexNo",
type: "number",
sortable: true,
},
{
label: "字典选项",
prop: "DictValue",
sortable: true,
component: "acSelect",
params: {
type: "select",
dataType: "dict",
dataCode: "Dict_AreaLevel",
},
},
{
label: "城市",
prop: "CityCode",
component: "acSelectCity",
params: {},
},
{
label: "枚举选项",
prop: "EnumValue",
sortable: true,
component: "acSelect",
params: {
type: "select",
dataType: "enum",
dataCode: "SexEnum",
},
},
{
width: 150,
label: "创建时间",
prop: "CreateTime",
type: "datetime",
format: "yyyy-MM-dd HH:mm",
valueFormat: "yyyy-MM-dd HH:mm:ss",
rangeSeparator: "-",
//searchSpan:12,
search: true,
searchRange: true,
sortable: true,
},
//子表单实现
{
type: "dynamic",
label: "子表单",
span: 24,
hide: true,
prop: "Temp_FullAuditTable_SubList",
children: {
align: "center",
headerAlign: "center",
index: false,
addBtn: true,
delBtn: true,
column: [
{
//type: "input",
label: "单行文本",
span: 24,
display: true,
prop: "Name1",
},
{
label: "枚举选项",
prop: "EnumValue1",
component: "acSelect",
params: {
type: "select",
dataType: "enum",
dataCode: "SexEnum",
},
},
],
},
},
],
自定义组件关键代码:
<el-select
v-model="selectValue"
:multiple="type === 'multiple'"
@change="change"
:disabled="disabled"
:placeholder="placeholder"
v-if="type === 'select' || type === 'multiple'"
>
<el-option
v-for="item in dict"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
........................
export default {
props: {
key1: {
type: String,
default: "select",
},
value: {
//type: Object,
required: true,
},
type: {
type: String,
default: "select", //radio,checkbox,select,multiple
},
dataType: {
type: String,
default: "bool", //bool,audit,dict,enum,table
},
dataCode: {
type: String,
},
options: {
type: Object,
default: () => {
return {
url: "/api_admin/AdminDataDictionary?PageIndex=1&PageSize=999",
label: "DictionaryName",
value: "Id",
};
},
},
disabled: {
type: Boolean,
},
placeholder: {
type: String,
},
},
data() {
return {
selectValue: undefined,
dict: [],
};
},
watch: {
value(value) {
if (value !== this.selectValue) {
this.selectValue = value;
}
},
},
mounted() {
........................
数据值如下:
[
{
"IsAudit": true,
"IsDelete": false,
"DeleteBy": null,
"DeleteTime": null,
"CreateBy": "29405e1b-2535-4b33-9dcc-81b2616c5753",
"CreateTime": "2021-09-03 15:20:12",
"UpdateBy": "29405e1b-2535-4b33-9dcc-81b2616c5753",
"UpdateTime": "2021-09-03 16:10:16",
"IndexNo": 333,
"ExtJson": null,
"RowVersion": 1,
"Name": "222222",
"DictValue": 2,
"File": "http://127.0.0.1:33333/api/admin/File/upload/20210903/1630653731862.jpg",
"Detail": "<p>dfasd<b>fasdfasdf</b></p>",
"EnumValue": "男",
"CityCode": "4404",
"CityCodeList": [
"44",
"4404"
],
"Address": null,
"lat": null,
"lng": null,
"Temp_FullAuditTable_SubList": [
{
"ParentId": "e509030f-140c-428d-b80a-26135239d018",
"Name1": "3",
"File1": "http://127.0.0.1:33333/api/admin/File/upload/20210903/1630655388034.jpg",
"EnumValue1": 1,
"Id": "2a86aca5-eae4-4866-3d3c-08d96eaeeed3"
}
],
"Id": "e509030f-140c-428d-b80a-26135239d018"
},
.........
]
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
crud需要绑定v-model="formdata",两种方式绑定自定义组件v-model:
1.自定义组件绑定为formdata.Temp_FullAuditTable_SubList.EnumValue1
2.自定义组件slot-scope="row" v-modal绑定为row.EnumValue1
最后取值用formdata.Temp_FullAuditTable_SubList.EnumValue1 可以取到的
2.9.6+ 将会在change click blur focus中返回index等其它参数
登录 后才可以发表评论