zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    ajax中网页传输(三)XML——下拉列表显示练习
    ajax中网页传输(二)JSON——下拉列表显示练习
    ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习
    ajax讲解:“创建用户”和“用户登录”练习
    JSON讲解和“弹窗”
    jQuery讲解
    Victor and String[Bestcoder #52 1004](回文树)
    回文串[APIO2014](回文树)
    回文子串计数[自创](回文树)
    随机序列[SHOI2016](找规律+线段树)
  • 原文地址:https://www.cnblogs.com/chen-cheng/p/13925018.html
Copyright © 2011-2022 走看看