cascader 三级联动数据回显 el-cascader 级联选择器详解

在我们使用cascader 写三级联动的时候 往往会遇到需要回显 区域 这里我们以 element 示例

• 基本属性

v-model：绑定值
props：参数指定绑定数据的格式
clearable：清空选项
filterable：搜索功能
show-all-levels：示最后一级
checkStrictly：选中不是最后一级的节点
lazy： 动态下拉数据

以上是我们常用的几个属性想要了解更多可去官网

• 代码实现三级联动 以下我们简单的看三种场景的使用

1.使用props 指定绑定数据的格式

    <el-cascader v-model="value" :options="myOptions" :props="{label:'name',value:'id',children:'children' }"></el-cascader>
      myOptions: [{
        id: '1',
        name: '北京',
        children: [{
          id: '2',
          name: '市辖区',
        },
        {
          id: '3',
          name: '海淀区',
        }],
      }],

2.checkStrictly 开启后 我们想选中不是最后一级的节点 expandTrigger修改为hover

    <el-cascader v-model="value" :options="defaultOptions" :props="{ checkStrictly: 'true',expandTrigger: 'hover' }"></el-cascader>

3.slot-scope=“{ data }” 自定义 渲染的内容和样式更改

 自定义节点内容
    <el-cascader v-model="value" :options="defaultOptions">
      <template slot-scope="{ data }">
        <span style="fonst-size:20px">{{ data.label }}</span>
      </template>
    </el-cascader>

4.三级联动数据回显 以及动态下拉数据开启 lazy属性
vue2.0

   <el-cascader :props="Props"></el-cascader>
   data:{
      Props: {
        lazy: true,
        lazyLoad(node, resolve) {
          // 通过resolve将子节点数据返回
          let nodes = [{
              label: '北京',
              value: 1
            }];
            this.value = [31, 3101, 310101, 310101002] // 这里是数据双向绑定
          resolve(nodes);
        }
      }
}

vue3.0
亿点小知识：我们可以通过level （下拉级别）判断下拉是否有数据进行处理

const propsValue = ref();
 propsValue.value = {
      lazy: true,
      label: "name",
      value: "code",
      checkStrictly: true,
     async lazyLoad(node: any, resolve) {
          const {
            level,
            data: { code }
          } = node;
          const { data } = await getCode(code);//getCode 从后端获取区域数据
          if (level == 3) {
            data.forEach(item => {
              // 当点击最后一级的时候 label 后面不会转圈圈 并把相关值赋值到选择器上
              item.leaf = level >= 1;
            });
          }
          resolve(data);
      }

以上就是前端cascader 三级联动数据回显感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…