【element-ui】element级联选择器Cascader怎么设置默认选中选项
需求为打开弹窗之后，通过级联选择器多选，之后返回页面，再次打开弹窗时，需要级联选择器显示上次选中内容
template ：
<el-cascader :options="options"
v-model="dimensionArr"
:props="props"
collapse-tags
ref="cascader"
@change="handleChange"
>
</el-cascader>
数据部分 ：
data() { return {
props: {
multiple: true,
lazy: true,
expandTrigger: 'hover'
},
dimensionArr: [], // 用来放默认选中的部分
// 级联选择器的数据
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致"
},
{
value: "fankui",
label: "反馈"
},
{
value: "xiaolv",
label: "效率"
},
{
value: "kekong",
label: "可控"
}
]
},
{
value: "daohang",
label: "导航",
children: [
{
value: "cexiangdaohang",
label: "侧向导航"
},
{
value: "dingbudaohang",
label: "顶部导航"
}
]
}
]
},
{
value: "zujian",
label: "组件",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout 布局"
},
{
value: "color",
label: "Color 色彩"
},
{
value: "typography",
label: "Typography 字体"
},
{
value: "icon",
label: "Icon 图标"
},
{
value: "button",
label: "Button 按钮"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio 单选框"
},
{
value: "checkbox",
label: "Checkbox 多选框"
},
{
value: "input",
label: "Input 输入框"
},
{
value: "input-number",
label: "InputNumber 计数器"
},
{
value: "select",
label: "Select 选择器"
},
{
value: "cascader",
label: "Cascader 级联选择器"
},
{
value: "switch",
label: "Switch 开关"
},
{
value: "slider",
label: "Slider 滑块"
},
{
value: "time-picker",
label: "TimePicker 时间选择器"
},
{
value: "date-picker",
label: "DatePicker 日期选择器"
},
{
value: "datetime-picker",
label: "DateTimePicker 日期时间选择器"
},
{
value: "upload",
label: "Upload 上传"
},
{
value: "rate",
label: "Rate 评分"
},
{
value: "form",
label: "Form 表单"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table 表格"
},
{
value: "tag",
label: "Tag 标签"
},
{
value: "progress",
label: "Progress 进度条"
},
{
value: "tree",
label: "Tree 树形控件"
},
{
value: "pagination",
label: "Pagination 分页"
},
{
value: "badge",
label: "Badge 标记"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert 警告"
},
{
value: "loading",
label: "Loading 加载"
},
{
value: "message",
label: "Message 消息提示"
},
{
value: "message-box",
label: "MessageBox 弹框"
},
{
value: "notification",
label: "Notification 通知"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu 导航菜单"
},
{
value: "tabs",
label: "Tabs 标签页"
},
{
value: "breadcrumb",
label: "Breadcrumb 面包屑"
},
{
value: "dropdown",
label: "Dropdown 下拉菜单"
},
{
value: "steps",
label: "Steps 步骤条"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog 对话框"
},
{
value: "tooltip",
label: "Tooltip 文字提示"
},
{
value: "popover",
label: "Popover 弹出框"
},
{
value: "card",
label: "Card 卡片"
},
{
value: "carousel",
label: "Carousel 走马灯"
},
{
value: "collapse",
label: "Collapse 折叠面板"
}
]
}
]
},
{
value: "ziyuan",
label: "资源",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "组件交互文档"
}
]
}
]
}
},
使用了找到的一个方法，给级联选择器绑定v-model，我在打开弹窗的方法中，直接给级联选择器v-model绑定的dimensionArr赋值，赋值结果为
[ 'jiaohu', 'carousel'
]
但是页面上的级联选择器还是个空白的，无法显示默认选中的两项，请问各位大佬，怎么才能实现默认选中功能
回答：
编辑一下，先看一个props的值
props的emitPath
在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
这里emitPath默认为true，此时选中的值是数组，dimensionArr: [['ziyuan','jiaohu'],['zujian','others','carousel']],
题主的情况应设为false。
props的lazy
题主的解决办法：
1.无懒加载
props: { emitPath: false,
multiple: true,
expandTrigger: 'hover',
},
2.懒加载
这里实现的不好，主要是默认选中的问题，用placeholder凑合了，
为了简化，只选中了一个。
<template> <div>
<el-cascader
:options="options"
v-model="dimensionArr"
:props="props"
collapse-tags
ref="cascader"
@change="handleChange"
:placeholder="select"
>
</el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
select:'组件交互文档',
props: {
emitPath: false,
multiple: true,
lazy: true,
expandTrigger: "hover",
lazyLoad: (node, resolve) => {
console.log("node", node);
if (node.value === "ziyuan") {
resolve([
{
value: "axure",
label: "Axure Components",
},
{
value: "sketch",
label: "Sketch Templates",
},
{
value: "jiaohu",
label: "组件交互文档",
},
]);
this.dimensionArr=['jiaohu']
} else resolve([]);
},
},
dimensionArr: ["ziyuan"],
options: [
{
value: "zhinan",
label: "指南",
},
{
value: "zujian",
label: "组件",
},
{
value: "ziyuan",
label: "资源",
},
],
};
},
components: {},
computed: {},
mounted() {},
methods: {
handleChange() {},
},
};
</script>
<style lang="less" scoped></style>
回答：
利用vuex做数据管理
store
import Vue from 'vue'import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
arr:[]
},
mutations: {
changeArr(state,value){
state.arr = value
},
},
actions: {}
})
export default store
页面handleChange方法
handleChange(value) { this.$store.commit('changeArr',value)
}
computed引用
computed:{ Arr(){
return this.$store.state.arr
}
},
直接v-model Arr
以上是 【element-ui】element级联选择器Cascader怎么设置默认选中选项 的全部内容， 来源链接： utcz.com/a/151850.html
