Avue dynamically changes the value in option

option: {
          height: 'auto',
          calcHeight: 80,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          selection: true,
          viewBtn: true,
          dialogType: 'drawer',
          dialogClickModal: false,
          column: [
            {
              label: "登录账号",
              prop: "account",
              search: true,
              display: false
            },
            {
              label: "所属租户",
              prop: "tenantName",
              slot: true,
              display: false
            },
            {
              label: "用户姓名",
              prop: "realName",
              search: true,
              display: false
            },
            {
              label: "所属角色",
              prop: "roleName",
              slot: true,
              display: false
            },
            {
              label: "所属部门",
              prop: "deptName",
              slot: true,
              display: false
            },
            {
              label: "用户平台",
              prop: "userTypeName",
              slot: true,
              display: false
            },
            {
              label: "用户平台",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              search: true,
              hide: true,
              display: false,
              prop: "userType",
              rules: [{
                required: true,
                message: "请选择用户平台",
                trigger: "blur"
              }]
            },
          ],
          group: [
            {
              label: '基础信息',
              prop: 'baseInfo',
              icon: 'el-icon-user-solid',
              column: [
                {
                  label: "所属租户",
                  prop: "tenantId",
                  type: "tree",
                  dicUrl: "/api/blade-system/tenant/select",
                  props: {
                    label: "tenantName",
                    value: "tenantId"
                  },
                  hide: !website.tenantMode,
                  addDisplay: website.tenantMode,
                  editDisplay: website.tenantMode,
                  viewDisplay: website.tenantMode,
                  rules: [{
                    required: true,
                    message: "请输入所属租户",
                    trigger: "click"
                  }],
                  span: 24,
                },
                {
                  label: "登录账号",
                  prop: "account",
                  rules: [{
                    required: true,
                    message: "请输入登录账号",
                    trigger: "blur"
                  }],
                },
                {
                  label: "用户平台",
                  type: "select",
                  dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dataType: "number",
                  slot: true,
                  prop: "userType",
                  rules: [{
                    required: true,
                    message: "请选择用户平台",
                    trigger: "blur"
                  }]
                },
                {
                  label: '密码',
                  prop: 'password',
                  hide: true,
                  editDisplay: false,
                  viewDisplay: false,
                  rules: [{required: true, validator: validatePass, trigger: 'blur'}]
                },
                {
                  label: '确认密码',
                  prop: 'password2',
                  hide: true,
                  editDisplay: false,
                  viewDisplay: false,
                  rules: [{required: true, validator: validatePass2, trigger: 'blur'}]
                },
              ]
            },
            {
              label: '详细信息',
              prop: 'detailInfo',
              icon: 'el-icon-s-order',
              column: [
                {
                  label: "用户昵称",
                  prop: "name",
                  hide: true,
                  rules: [{
                    required: true,
                    message: "请输入用户昵称",
                    trigger: "blur"
                  }]
                },
                {
                  label: "用户姓名",
                  prop: "realName",
                  rules: [{
                    required: true,
                    message: "请输入用户姓名",
                    trigger: "blur"
                  }, {
                    min: 2,
                    max: 5,
                    message: '姓名长度在2到5个字符'
                  }]
                },
                {
                  label: "手机号码",
                  prop: "phone",
                  overHidden: true
                },
                {
                  label: "电子邮箱",
                  prop: "email",
                  hide: true,
                  overHidden: true
                },
                {
                  label: "用户性别",
                  prop: "sex",
                  type: "select",
                  dicData: [
                    {
                      label: "男",
                      value: 1
                    },
                    {
                      label: "女",
                      value: 2
                    },
                    {
                      label: "未知",
                      value: 3
                    }
                  ],
                  hide: true
                },
                {
                  label: "用户生日",
                  type: "date",
                  prop: "birthday",
                  format: "yyyy-MM-dd hh:mm:ss",
                  valueFormat: "yyyy-MM-dd hh:mm:ss",
                  hide: true
                },
                {
                  label: "账号状态",
                  prop: "statusName",
                  hide: true,
                  display: false
                }
              ]
            },
            {
              label: '职责信息',
              prop: 'dutyInfo',
              icon: 'el-icon-s-custom',
              column: [
                {
                  label: "用户编号",
                  prop: "code",
                },
                {
                  label: "所属角色",
                  prop: "roleId",
                  multiple: true,
                  type: "tree",
                  dicData: [],
                  props: {
                    label: "title"
                  },
                  checkStrictly: true,
                  slot: true,
                  rules: [{
                    required: true,
                    message: "请选择所属角色",
                    trigger: "click"
                  }]
                },
                {
                  label: "所属部门",
                  prop: "deptId",
                  type: "tree",
                  multiple: true,
                  dicData: [],
                  props: {
                    label: "title"
                  },
                  checkStrictly: true,
                  slot: true,
                  rules: [{
                    required: true,
                    message: "请选择所属部门",
                    trigger: "click"
                  }]
                },
                {
                  label: "所属岗位",
                  prop: "postId",
                  type: "tree",
                  multiple: true,
                  dicData: [],
                  props: {
                    label: "postName",
                    value: "id"
                  },
                  rules: [{
                    required: true,
                    message: "请选择所属岗位",
                    trigger: "click"
                  }],
                },
              ]
            },
          ]
        },

If you want to assign a value to dicData, use the findObject method

initData(tenantId) {
        getRoleTree(tenantId).then(res => {
          const column = this.findObject(this.option.group, "roleId");
          column.dicData = res.data.data;
        });
        getDeptTree(tenantId).then(res => {
          const column = this.findObject(this.option.group, "deptId");
          column.dicData = res.data.data;
        });
        getPostList(tenantId).then(res => {
          const column = this.findObject(this.option.group, "postId");
          column.dicData = res.data.data;
        });
      },

Guess you like

Origin blog.csdn.net/hyupeng1006/article/details/127960757
Recommended