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

目录

前言

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

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);
     }
 
  }
}

---

总结

还是要根据实际展现形式来确定返回格式，如果是两个el-select的，本人比较建议两条API。