vue+elementui el-cascader 怎么实现动态加载加搜索？

Question

动态加载需要在点击之后才能搜索到子节点的内容。该怎么实现不点击，也能搜索到子节点的呢？

当没有搜索到内容时，v-model可以获取到输入的这个值吗?

Answer 1

懒加载组件lazy-cascader，看下能否满足需求

https://github.com/zhuss/lazy-cascader

Answer 2

可以在 filter-method 方法中对所有节点进行递归搜索，找到符合条件的节点并返回

Answer 3

<template>
  <el-cascader
    :options="options"
    lazy
    :lazy-load="loadOptions"
    :filter-method="filterMethod"
    placeholder="Please select"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      options: []
    };
  },
  methods: {
    loadOptions(node, resolve) {
  
      setTimeout(() => {
        resolve([
          {
            value: 'dynamic1',
            label: 'Dynamic 1'
          },
          {
            value: 'dynamic2',
            label: 'Dynamic 2'
          }
        ]);
      }, 1000);
    },
    filterMethod(input, option) {
      // 自定义搜索逻辑
      // 动态加载数据
      return option.label.indexOf(input) > -1;
    }
  }
};
</script>

自定义：

<template>
  <el-input v-model="inputValue" placeholder="Please select">
    <el-cascader
      slot="append"
      :options="options"
      lazy
      :lazy-load="loadOptions"
      :filter-method="filterMethod"
      v-model="selectedValue"
    ></el-cascader>
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      selectedValue: [],
      options: []
    };
  },
  methods: {
    loadOptions(node, resolve) {
      // 动态加载
    },
    filterMethod(input, option) {
      // 搜索逻辑
    }
  },
  watch: {
    selectedValue(value) {
      this.inputValue = value.join('/');
    }
  }
};
</script>

Answer 4

<el-cascader :filter-method="dataFilter"/>

methods: {

dataFilter(node, keyword) {
  // 搜素不区分大小写
  if (!!~node.text.indexOf(keyword) || !!~node.text.toUpperCase().indexOf(keyword.toUpperCase())) {
    return true;
  }
}

}