element-ui select 二级联动 在使用select 选择框时,选择第一个框的内容后，根据第一个框不同内容，展示第二个框里对应的内容，代码展示

### 回答1：
好的，下面是 element-ui 中 select 二级联动的代码示例：

1. 首先你需要在 data 中声明两个数组，分别用来存储第一个 select 的内容和第二个 select 的内容：

data() {
  return {
    options1: [], // 第一个 select 的内容
    options2: []  // 第二个 select 的内容
  }
}

2. 在页面中添加两个 select 组件，并绑定 options1 和 options2 数组：

<template>
  <el-select v-model="selected1" placeholder="请选择" :options="options1">
  </el-select>
  <el-select v-model="selected2" placeholder="请选择" :options="options2">
  </el-select>
</template>

3. 然后在第一个 select 的 change 事件中，根据选择的内容来更新第二个 select 的内容：

<template>
  <el-select v-model="selected1" placeholder="请选择" :options="options1" @change="updateOptions2">
  </el-select>
  <el-select v-model="selected2" placeholder="请选择" :options="options2">
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selected1: '', // 选中的第一个 select 的内容
      selected2: '', // 选中的第二个 select 的内容
      options1: [], // 第一个 select 的内容
      options2: []  // 第二个 select 的内容
    }
  },
  methods: {
    updateOptions2() {
      // 根据选中的第一个 select 的内容来更新 options2 数组
      // 这里假设 options1 和 options2 是已经初始化好的数组，
      // 并且 options2 中存储的是 options1 中每个选项对应的子选项
      this  

### 回答2：
element-ui的select组件是一个下拉选择框组件，支持二级联动。当使用select选择框时，选择第一个框的内容后，根据第一个框的不同内容，展示第二个框里对应的内容。下面是一个简单的代码示例：

<template>
<div>
<el-select v-model="selectedOption1" @change="handleChange1">
<el-option v-for="option in options1" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<el-select v-model="selectedOption2">
<el-option v-for="option in options2" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</div>
</template>

<script>
export default {
data() {
return {
selectedOption1: '', // 第一个选择框的选中值
selectedOption2: '', // 第二个选择框的选中值
options1: [ // 第一个选择框的选项
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
],
options2: [] // 第二个选择框的选项
}
},
methods: {
handleChange1() {
// 根据第一个选择框的选中值来更新第二个选择框的选项
if (this.selectedOption1 === 'option1') {
this.options2 = [
{ value: 'option1-1', label: '选项1-1' },
{ value: 'option1-2', label: '选项1-2' },
{ value: 'option1-3', label: '选项1-3' }
]
} else if (this.selectedOption1 === 'option2') {
this.options2 = [
{ value: 'option2-1', label: '选项2-1' },
{ value: 'option2-2', label: '选项2-2' },
{ value: 'option2-3', label: '选项2-3' }
]
} else if (this.selectedOption1 === 'option3') {
this.options2 = [
{ value: 'option3-1', label: '选项3-1' },
{ value: 'option3-2', label: '选项3-2' },
{ value: 'option3-3', label: '选项3-3' }
]
} else {
this.options2 = [] // 若第一个选择框没有选中值，则清空第二个选择框的选项
}
this.selectedOption2 = '' // 每次更新选项后，重置第二个选择框的选中值
}
}
}
</script>

在这个示例中，我们使用了两个select选择框，第一个选择框的选项为`options1`，第二个选择框的选项为`options2`。当第一个选择框的选中值发生改变时，通过`handleChange1`方法来根据选中值更新第二个选择框的选项。根据不同的选中值，我们为第二个选择框设置不同的选项。同时，每次更新选项后，我们将第二个选择框的选中值重置为空。  

### 回答3：
element-ui提供了组件`ElSelect`和`ElOption`来实现select选择框的二级联动功能。以下是示例代码：

<template>
<div>
<el-select v-model="selectedOption1" @change="handleChangeOption1">
<el-option v-for="option1 in options1" :key="option1.value" :label="option1.label" :value="option1.value"></el-option>
</el-select>
<el-select v-model="selectedOption2" v-if="selectedOption1" @change="handleChangeOption2">
<el-option v-for="option2 in options2" :key="option2.value" :label="option2.label" :value="option2.value"></el-option>
</el-select>
</div>
</template>

<script>
export default {
data() {
return {
options1: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
],
options2: [
{ value: 'suboption11', label: '子选项11', parent: 'option1' },
{ value: 'suboption12', label: '子选项12', parent: 'option1' },
{ value: 'suboption13', label: '子选项13', parent: 'option1' },
{ value: 'suboption21', label: '子选项21', parent: 'option2' },
{ value: 'suboption22', label: '子选项22', parent: 'option2' },
{ value: 'suboption31', label: '子选项31', parent: 'option3' },
{ value: 'suboption32', label: '子选项32', parent: 'option3' }
],
selectedOption1: '',
selectedOption2: ''
};
},
methods: {
handleChangeOption1(value) {
// 根据选项1的值，更新选项2的可选内容
// 清空选项2的值，防止出现旧选项2的值没有对应选项1的情况
this.selectedOption2 = '';

// 根据选项1的值过滤出对应的选项2
this.options2 = this.options2.filter((option) => option.parent === value);
},
handleChangeOption2(value) {
console.log('选中的选项2:', value);
}
}
};
</script>

以上代码实现了一个简单的二级联动select选择框，第一个选择框用于选择一级选项，选中后会根据选项1的值动态过滤出对应的二级选项供第二个选择框选择。当第二个选择框的值发生变化时，会触发`handleChangeOption2`方法，并打印选中的选项2的值。