基于 element-ui Cascader 级联选择器 的动态加载

需求
Cascader 级联选择器点击一级菜单后动态加载二级菜单

直接上代码

 <el-cascader :props="props" v-model="val" filterable clearable ></el-cascader>

  data() {
    let self = this;
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level == 0) {
              const firstLevel = self.firstLevelList.map( // 一级菜单
                val => ({
                  value: val.id,
                  label: val.label,
                  leaf: node.level >= 1
                })
              );
              resolve(firstLevel);
            }
            if (node.level != 0) {
            // 以点击的一级菜单的value值为条件请求二级菜单的接口
              self
                .getSecondLevelList({ id: node.value })
                .then(res => {
                  const secondLevel = res.data.map(val => ({
                    value: val.id,
                    label: val.label,
                    leaf: node.level >= 1
                  }));
                  resolve(secondLevel);
                })
                .catch(err => {
                  console.log(err);
                });
            }
          }, 1000);
        }
      },
    }
 }

那么接下来，还有一个问题，当你想要做数据回显时你会发现，点击输入框的时候，下拉的内容是有选中状态的数据，但是输入框中却没有内容，那么如何回显呢，经过我百度百度百度，最后找到一种方法，用 placeholder 显示作为内容，只能说牛逼好吧，然后改一下css样式就好了。

input::-webkit-input-placeholder {
      color:#717171 !important;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color:#717171 !important;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color:#717171 !important;
    }
    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color:#717171 !important;
    }