Vue使用Element的级联选择器Cascader，如何解决组件内滑动不跟随问题

在Element的级联选择器Cascader中，如果您希望当用户在组件内滑动时，下拉列表能够跟随滚动，则需要为Cascader添加`popper-class`属性，并在该属性中设置一个CSS类名，在该CSS类中设置下拉列表的最大高度和最大宽度，并将`overflow-y`属性设置为`auto`。

下面是一个示例代码：

<el-cascader
  :options="options"
  :props="props"
  v-model="selectedOptions"
  popper-class="cascader-popper"
></el-cascader>

.cascader-popper {
  max-height: 200px;
  max-width: 400px;
  overflow-y: auto;
}

在上面的示例中，`popper-class`属性将被设置为`cascader-popper`，这将应用于下拉列表的popper元素。在CSS类中，我们将设置下拉列表的最大高度和最大宽度，并将`overflow-y`属性设置为`auto`，以便在下拉列表中显示滚动条。

这样，当用户在组件内滑动时，下拉列表将跟随滚动，并且在下拉列表中显示滚动条，以便用户可以浏览所有选项。

相关问题

vue3element级联选择器默认值

在Vue3的Element级联选择器中，可以通过`v-model`指令和`options`属性来设置默认值。

1. 使用`v-model`指令：

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

在Vue实例中，可以通过`data`选项中的`value`属性来设置默认值。例如：

data() {
  return {
    value: ['guide', 'disciplines', 'consistency']
  }
}

2. 使用`options`属性：

<el-cascader :options="options" @change="handleChange" />

在Vue实例中，可以通过`data`选项中的`options`属性来设置级联选择器的选项。例如：

data() {
  return {
    options: [
      {
        value: 'guide',
        label: 'Guide',
        children: [
          {
            value: 'disciplines',
            label: 'Disciplines',
            children: [
              {
                value: 'consistency',
                label: 'Consistency'
              }
            ]
          }
        ]
      }
    ],
    value: ['guide', 'disciplines', 'consistency']
  }
}

以上是两种设置Vue3的Element级联选择器默认值的方法。

vue项目 element-ui 级联选择器 el-cascader 回显的完美解决

对于 Element UI 的级联选择器 el-cascader，如果需要回显已经选中的值，可以通过设置 v-model 和 :options 属性来实现。

假设有一个三级联动的级联选择器，选项数据如下：

options: [{
  value: 'zhinan',
  label: '指南',
  children: [{
    value: 'shejiyuanze',
    label: '设计原则',
    children: [{
      value: 'yizhi',
      label: '一致'
    }, {
      value: 'fankui',
      label: '反馈'
    }]
  }, {
    value: 'daohang',
    label: '导航',
    children: [{
      value: 'cexiangdaohang',
      label: '侧向导航'
    }, {
      value: 'dingbudaohang',
      label: '顶部导航'
    }]
  }]
}]

如果需要回显已经选中的值，可以将当前选中的值通过 v-model 绑定到 data 中的一个变量上，例如：

<el-cascader
  v-model="selectedOptions"
  :options="options"
></el-cascader>

其中，selectedOptions 是一个数组，用于保存当前选中的值。

接下来，需要在 mounted 钩子函数中设置已选中的值，例如：

mounted() {
  this.selectedOptions = ['zhinan', 'shejiyuanze', 'yizhi']
}

这样，在页面加载完成后，级联选择器就会自动回显已经选中的值。

需要注意的是，如果级联选择器的选项数据是异步加载的，需要在加载完成后再设置已选中的值，例如：

mounted() {
  this.loadOptions().then(() => {
    this.selectedOptions = ['zhinan', 'shejiyuanze', 'yizhi']
  })
},
methods: {
  loadOptions() {
    // 异步加载选项数据
  }
}

这样就可以实现 Element UI 的级联选择器 el-cascader 的回显功能了。