element-ui 2.x版本 Cascader 级联选择器点击label获取到值

原创已于 2022-03-21 14:49:24 修改 · 2.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #elementui

于 2022-03-21 14:43:33 首次发布

本文介绍了在Vue.js中使用Element UI的级联选择器（Cascader）组件实现多级联动的效果。面对没有提供直接API的情况，作者通过监听标签点击并自定义`lazyLoad`和`handleChange`方法来动态获取和加载二级数据。尽管这种方法解决了问题，但样式和数据格式仍存在挑战，建议后端提供一次性返回所有数据的API以简化处理。

前言

一、根据需求选择单选选择任意一级选项

1.因为children是另外一个api获取，需要做到点击一级的label,通过一级的id,去获取二级的数据。我查找了一些文档，也没有发现官方提供API，官方的只有选中radio的时候触发事件。

总结

前言

这种多级联动的建议还是让后端一条API返回，虽然我处理好了，但还是有一些样式问题，譬如，resolve返回的数据会自动加入一些数据，返回了一个children，样式上面就不太对劲了。

一、根据需求选择单选选择任意一级选项

<div class="block">
  <span class="demonstration">单选选择任意一级选项</span>
  <el-cascader
    :options="options"
    :props="{ checkStrictly: true }"
    clearable></el-cascader>
</div>
<script>
  export default {
    data() {
      return {
        options: [{
          value: 'zhinan',
          label: '指南'
          },
          {
           value: 'daohang',
           label: '导航'
           }
          }]

1.因为children是另外一个api获取，需要做到点击一级的label,通过一级的id,去获取二级的数据。我查找了一些文档，也没有发现官方提供API，官方的只有选中radio的时候触发事件。

<div class="block">
  <span class="demonstration">单选选择任意一级选项</span>
  <el-cascader
    :options="options"
    :props="{ checkStrictly: true, lazy: true, lazyLoad: handle: handleChange}"
    clearable></el-cascader>
</div>

export default {
  methods: {
    handleChange(node, resolve) {
       // 点击label 就能拿到值啦，可以在这打印一下node
       console.log(node, 'node')
       const { level } = node
        const nodes = Array.from({ length: level + 1 })
            .map(item => ({
              value: ++id,
             label: `选项${id}`,
             leaf: level >= 2
          }));
         // 通过调用resolve将子节点数据返回，通知组件数据加载完成
         resolve(nodes);
     }
 
  }
}