959 Star 5.1K Fork 1.6K

GVPsmallwei / Avue

 / 详情

子表单中自定义组件无法通过value属性拿到值(主表单中可以)

已完成
创建于  
2021-09-03 17:12

子表单中自定义组件无法通过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"
    },
.........
]

评论 (4)

tonydaix 创建了任务
tonydaix 关联仓库设置为smallwei/Avue
tonydaix 修改了描述
展开全部操作日志

直接用v-model试试

自定义组件里面就是v-model啊

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等其它参数

smallwei 任务状态待办的 修改为已完成
smallwei 里程碑设置为v2.9.6

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(3)
632261 smallweigit 1588214431
JavaScript
1
https://gitee.com/smallweigit/avue.git
git@gitee.com:smallweigit/avue.git
smallweigit
avue
Avue

搜索帮助