• elementui的Cascader 级联选择器,在懒加载的时候数据无法回显的解决方案


    一:实现思路

    定位原因:懒加载的级联下拉框无法回显是因为,只绑定了model的值,没有options的数据支撑的话,获取不到节点的内容导致;

    方案:拿到选中的项的时候,用这些值去递归循环获取相应的节点的一些属性,赋值给options,然后注意最后一个节点的leaf属性一定要有且是true了才可以回显;

    二:绑定了options还是没有回显的可能原因

    2.1 赋值options的格式不对;

    2.2 赋值的option里面最后一项没有加上 leaf:true,导致插件以为还有下级所以无法回显;

    2.3 赋值的id数据类型和实际不一致,如果model里面的是字符串,option里面的id也要转换成字符串;

    三:实现demo

    // test.vue
    <template>
        <!-- 测试懒加载 -->
        <el-cascader :props="test_props" :options="test_options" v-model="test_model"></el-cascader>
    </template>
    
    <script>
         let id2 = 0;
    
        export default {
            data(){
                return {
                    test_options: [ //回显值得关键必须要把需要回显的都写到options里面,且最后一项要加上leaf:true,表示无下级了才可以回显;这里写死,实际要根绝接口返回的需要回显的数据,来递归循环到结果,赋值给这里;
              {
                value: '选项1', label: '选项1', children: [{ value: '选项3', label: '选项3', leaf: true }],
              },
              {
                value: '选项2', label: '选项2',
              },
            ],
            test_model: ['选项1', '选项3'],//模拟后台取到的默认值,这里是单选
            test_props: {
              lazy: true,
              lazyLoad(node, resolve) {
                const { level } = node;
                setTimeout(() => {
                    const nodes = Array.from({ length: 2 })
                      .map((item) => {
                        ++id2
                        return {
                          value: `选项${id2}`,
                          label: `选项${id2}`,
                          leaf: level >= 1,
                        }
                      });
                    // 通过调用resolve将子节点数据返回,通知组件数据加载完成
                    resolve(nodes);
                }, 1000);
           } } } }
    </script>
  • 相关阅读:
    Balance_01背包
    4 Values whose Sum is 0_upper_bound&&ower_bound
    Newspaper Headline_set(upper_bound)
    lower_bound和upper_bound算法
    Blocks_DP&&矩阵快速幂
    All X_数的快速幂
    Training little cats_矩阵快速幂
    Raising Modulo Numbers_快速幂取模算法
    Defining Python Source Code Encodings
    Python ord(char)
  • 原文地址:https://www.cnblogs.com/chun321/p/14054713.html
Copyright © 2020-2023  润新知