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