限制 el-select 和 el-cascader 下拉框宽度

需求

el-select、el-cascader 等下拉选项字符过多时，下拉框会自动边长，有时甚至会超出屏幕宽度，不美观。

因此，需要限制下拉框宽度，选项内容过长则以省略号显示，鼠标悬浮显示完整内容。

el-select 解决方案

加 `popper-class` 和 `title` ，设定宽度为 0

<el-select
    popper-class="my-popper"
    v-model="formDefinition[item.id]"
    placeholder="请选择（可搜索）"
    filterable
    clearable
>
    <el-option
        v-for="opt in clsPropOps"
        :title="opt.className"
        :key="opt.className"
        :label="opt.className"
        :value="opt.id"
    />
</el-select>

// scss 代码，不要写在 scoped 内
<style lang="scss">
    .my-popper {
      width: 0;
    }
</style>

el-cascader 解决方案

加 `popper-class`，设定宽度为 0 ，加选项插槽，设置 `title`

<el-cascader
  popper-class="cls-attr-cascader"
  v-model="clsAttrForm.tag"
  :options="addAttrList"
  :show-all-levels="true"
  clearable
  filterable
  placeholder="请选择（可搜索）"
  :props="{
    expandTrigger: 'hover',
    emitPath: false
  }"
>
  <template v-slot:default="{ data }">
    <span :title="data.label">{{ data.label }}</span>
  </template>
</el-cascader>

// scss 代码，不要写在 scoped 内
<style lang="scss">
    .cls-attr-cascader .el-cascader-panel .el-cascader-menu {
      width: 0;
    }
</style>

参考链接

1. elementUI的select框自定义宽度
2. element里面的el-cascader组件宽度限制