51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

element-ui 级联选择器el-cascader动态加载

看过了el-cascade官方说明后,发现并不适用于我,也可以说这个例子不是太适合想要直接复制粘贴的我,于是乎,我将其改写成了可以直接复制粘贴的例子,具体代码如下:

<template>
  <el-cascader
    :props="cascaderProps"
    v-model="dataid"
    clearable>
  </el-cascader>
</template>

\<script\>
export default {
name: "cascader",
data() {
return {
dataid: \[\],
cascaderProps: {
lazy: true,
lazyLoad: this.lazyLoad
},
}
},
methods: {
lazyLoad(node, resolve) {
// 获取当前是第几层
let level = node.level


      let nodes = []
      // 我这边是两层,因此可根据是否有数据来做判断条件
      // 可改为根据不同层级判断
      if (!node.data) {
        nodes = [
          {
            value: 'beijing',
            label: '北京',
            leaf: level &gt;= 1
          },
          {
            value: 'shanghai',
            label: '上海',
            leaf: level &gt;= 1
          },
        ]
      } else {
        if (node.value === "beijing") {
          nodes = [
            {
              value: 'chaoyang',
              label: '朝阳区',
              leaf: level &gt;= 1
            },
            {
              value: 'haidian',
              label: '海淀区',
              leaf: level &gt;= 1
            },
          ]
        } else {
          nodes = [
            {
              value: 'pudong',
              label: '浦东新区',
              leaf: level &gt;= 1
            },
            {
              value: 'hongkou',
              label: '虹口区',
              leaf: level &gt;= 1
            },
          ]
        }
      }
      // 通过调用resolve将子节点数据返回,通知组件数据加载完成
      resolve(nodes)
    }



`}
}
</script>
`

赞(0)
未经允许不得转载:工具盒子 » element-ui 级联选择器el-cascader动态加载