element 动态加载Cascander

页面部分

  <el-cascader placeholder="请选择填报周期" :props="props" v-model="fillDate"></el-cascader>

Vue部分

通过 lazy 开启动态加载，并通过 lazyload 来设置加载数据源的方法。

lazyload 方法有两个参数：
第一个参数 node 为当前点击的节点，第二个 resolve 为数据加载完成的回调(必须调用)。

为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过 props.leaf 修改)。否则会简单的以有无子节点来判断是否为叶子节点。

fillDate: [],
props: {
  lazy: true,
  lazyLoad: this.lazyLoad 
}


lazyLoad ( node, resolve ) {
  const { level } = node
  setTimeout(() => {
    if ( node.level === 0 ) {
      const nodes = res.data.map(item => ({
        value: item,
        label: item + `年`,
        leaf: node.level >= 2
      }));

      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      resolve(nodes);
    }

    if ( node.level === 1 ) {
      const nodes = res.data.map(item => ({
        value: item,
        label: item + `月`,
        leaf: node.level >= 2
      }));

      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      resolve(nodes);
    }

    if ( node.level === 2 ) {
      const nodes = res.data.map(item => ({
        value: item,
        label: item,
        leaf: node.level >= 2
      }));

      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      resolve(nodes);
    }
  }, 1000)
}

如果需要重新加载列表数据，动态赋值，可以用 v-if

<el-cascader v-if="isShowInfo" placeholder="请选择填报周期" :props="props" v-model="fillDate"></el-cascader>


isShowInfo: true


this.isShowInfo = false
setTimeout(() => {
  this.isShowInfo = true
},100)