vue开发中,通过使用 Element UI 的 el-cascader 组件来实现级联选择器功能,下面是一个示例代码,演示如何使用 el-cascader 组件初始化级联选择器,并设置默认值为单位 测试1 和部门 测试11
- <template>
- <div>
- <el-cascader
- v-model="selectedValues"
- :options="options"
- :props="props"
- @change="handleChange"
- placeholder="请选择"
- >el-cascader>
- div>
- template>
- export default {
- data() {
- return {
- // 初始化级联选择器的选中值
- selectedValues: [],
- // 级联选择器的数据源
- options: [
- {
- value: '1',
- label: '测试1',
- children: [
- { value: '2', label: '测试11' },
- { value: '3', label: '测试12' }
- ]
- }
- ],
- // 自定义配置,用于指定数据结构中的属性名
- props: {
- value: 'value',
- label: 'label',
- children: 'children'
- }
- };
- },
- methods: {
- // 监听级联选择器值变化事件
- handleChange(selectedValues) {
- console.log('选中的值:', selectedValues);
- }
- },
- created() {
- // 设置初始化选中值为单位 '测试1' 和部门 '测试12'
- this.selectedValues = ['1', '3'];
- }
- };
在这个示例中,options 数组包含了级联选择器的数据源,其中每个对象表示一个选项,包括 value、label 和 children 属性。props 对象用于指定数据结构中的属性名,以便 el-cascader 组件正确地解析数据。
通过在 selectedValues 中设置初始选中值为单位 测试1 和部门 测试12,并将其绑定到 el-cascader 组件的 v-model 上,可以在初始化时选中指定的值。