• Error in callback for watcher "value": "TypeError: Cannot read property 'level' of null"


    弄了一个省市县级联el-cascader选择器,发现第二次选择的时候报异常如下图

     网上看到这个文章完美解决 https://blog.csdn.net/weixin_43043994/article/details/100303097

    我是用了加了key,参考如下我对el-cascader二次封装

    <template>
      <div class="definition-cascader">
        <el-cascader
          :key="isRescourceShow"
          v-model="valueFromFather"
          style="100%"
          :options="unitData"
          :props="propsFromFather"
          :placeholder="placeholder"
          :size="size"
          :filterable="filterable"
          :clearable="clearable"
          :show-all-levels="false"
          :filter-method="filterMethod"
          @change="onChange"
        ></el-cascader>
      </div>
    </template>

    <script>
    export default {
      name: 'DefinitionCascader',
      props: {
        // source: {
        //   type: String,
        //   required: true
        // },
        props: {
          type: Object,
          default() {
            return {
              multiple: false,
              checkStrictly: true,
              value: 'id',
              label: 'fullname'
            }
          }
        },
        placeholder: {
          type: String,
          default: '请选择发起单位'
        },
        unitData: Array,
        value: {
          type: [String, Number, Array],
          default: ''
        },
        checkStrictly: {
          type: Boolean,
          default: true
        },
        mustSearchKeyword: {
          type: Boolean,
          default: false
        },
        size: {
          type: String,
          default: 'small'
        },
        clearable: {
          ype: Boolean,
          default: true
        },
        filterable: {
          type: Boolean,
          default: true
        },
      },
      data() {
        return {
          searchKeyword: '',
          isRescourceShow: 0,
          valueFromFather: this.value,
          propsFromFather: this.props
        }
      },
      watch: {
        value(v) {
          this.valueFromFather = v
        },
        unitData(){
          ++this.isRescourceShow
        }
      },
      methods: {
        onChange(v) {
          this.$emit('input', v)
        },
        filterMethod(node, keyword) {
          return node.text.includes(keyword) || keyword.includes(node.text)
        }
      }
    }
    </script>

    <style>
    .el-input__inner{
      padding: 0 8px;
    }
    .el-cascader-menu__wrap {
      height: 300px;
    }
    </style>
  • 相关阅读:
    Java基础--阻塞队列ArrayBlockingQueue
    Java基础--反射Reflection
    Java基础--对象克隆
    Java基础--HashCode
    Java基础--序列化Serializable
    OpenCV 绘制图像直方图
    PHP isset, array_key_exists配合使用, 并解决效率问题
    安装XDEBUG步骤及问题
    设计模式例子
    适配器模式例子
  • 原文地址:https://www.cnblogs.com/chen-cheng/p/13925018.html
Copyright © 2020-2023  润新知