ant-design-vue 问题归纳

Antd问题归纳

  • 子组件不允许改变父组件的值,也不允许通知父组件更改
  • 弹窗编辑表单setFieldsValue问题

子组件不允许改变父组件的值,也不允许通知父组件更改

报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly
since the value will be overwritten whenever the parent component
re-renders. Instead, use a data or computed property based on the
prop’s value. Prop being mutated: “formVisable”

解决:
子组件命名本地变量,watch监听父变量,更新本地变量。本地变量变化时,通知父级更改。
父组件


子组件:


`
props: {
    formVisable: {
      type: Boolean,
      required: true,
      default: false
    }
  watch: {
    formVisable: function(newVal, oldVal) {
      this.visible = newVal
    }
  },
  data() {
    return {
      visible: false
    }
  }
  methods: {
  handleClose() {
      this.visible = false
      this.$emit('closepop')
    }
  }

弹窗编辑表单setFieldsValue问题

报错

Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]" to register it before render.

解决:
1)设定的键值对必须要和表单项一一对应,不能多传
2)将表单赋值操作放到表单更新后执行

toEdit(item) {
     
      //复制
      const formData = JSON.parse(JSON.stringify(item))
      //删除多余字段
      delete formData['create_by']
      delete formData['update_time']
      delete formData['create_time']
      delete formData['id']
      delete formData['update_by']
      this.formVisable = true
      //Dom更新后再赋值
      this.$nextTick(() => {
     
        this.$refs.formDialog.setData(formData)
      })
    },

你可能感兴趣的:(js)