elementui联级选择器数组有其他值(element ui级联选择器回显数据)

在使用Element UI的级联选择器时，经常会遇到需要将已有的数据回显到选择器中的情况。本文将介绍如何解决这个问题，并提供几种不同的解决方案。

解决方案概述

要在Element UI的级联选择器中回显数据，我们需要确保选择器的v-model绑定的值与选项数据结构相匹配。常见的方法包括手动设置v-model的值、使用watch监听数据变化并更新选择器，以及通过计算属性动态生成选择器的值。

方法一：手动设置 v-model 的值

代码示例

假设我们有一个级联选择器的数据结构如下：

javascript
data() {
return {
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致'
},
{
value: 'fankui',
label: '反馈'
}
]
}
]
}
],
selectedValue: [] // 用于存储选择器的值
};
},
mounted() {
this.setSelectedValue();
},
methods: {
setSelectedValue() {
// 假设我们需要回显的数据是 ['zhinan', 'shejiyuanze', 'yizhi']
this.selectedValue = ['zhinan', 'shejiyuanze', 'yizhi'];
}
}


模板部分

html

  <el-cascader
    v-model="selectedValue"
    :options="options"
    @change="handleChange"</p>

<blockquote>
  <p>
  
  

方法二：使用 watch 监听数据变化

代码示例

如果我们需要根据外部数据的变化动态更新选择器的值，可以使用watch来监听数据变化。

javascript
data() {
return {
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致'
},
{
value: 'fankui',
label: '反馈'
}
]
}
]
}
],
selectedValue: [],
externalData: null // 假设这是从外部获取的数据
};
},
watch: {
externalData: {
handler(newVal) {
if (newVal) {
this.selectedValue = newVal;
}
},
immediate: true
}
},
mounted() {
// 假设我们在mounted生命周期中获取外部数据
this.getExternalData();
},
methods: {
getExternalData() {
// 模拟异步获取数据
setTimeout(() => {
this.externalData = ['zhinan', 'shejiyuanze', 'yizhi'];
}, 1000);
}
}


模板部分

html

  <el-cascader
    v-model="selectedValue"
    :options="options"
    @change="handleChange"</p>

<blockquote>
  <p>
  
  

方法三：使用计算属性

代码示例

如果需要根据多个数据源动态生成选择器的值，可以使用计算属性来实现。

javascript
data() {
return {
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致'
},
{
value: 'fankui',
label: '反馈'
}
]
}
]
}
],
data1: null,
data2: null
};
},
computed: {
selectedValue() {
if (this.data1 && this.data2) {
return [this.data1, this.data2];
}
return [];
}
},
mounted() {
this.getData1();
this.getData2();
},
methods: {
getData1() {
setTimeout(() => {
this.data1 = 'zhinan';
}, 500);
},
getData2() {
setTimeout(() => {
this.data2 = 'shejiyuanze';
}, 1000);
}
}


模板部分

html

  <el-cascader
    v-model="selectedValue"
    :options="options"
    @change="handleChange"</p>

<blockquote>
  <p>
  
  

以上三种方法都可以有效地在Element UI的级联选择器中回显数据。根据具体的需求和场景，可以选择最适合的方法来实现。