Cascader 选项文字内容过长，鼠标悬停显示

在项目中使用级联选择器的时候会遇到个别项的文字过多导致区域过长，因此需要设置最大的宽度，然后给组件提供的--自定义节点内容-来设置实现鼠标悬停显示；

.el-cascader-menu{
  max-width:250px;
}

然后给大家提供封装好的cascader组件：

<el-cascader
            v-else-if="el.type == 'cascader'"
            :options="el.optionList"
            :placeholder="el.placeHolder"
            :show-all-levels="el.showAllLevels"
            size="small"
            :props="{ checkStrictly: true, emitPath: false, value:el.optionValueKey, label:el.optionLabelKey,multiple:el.multiple,emitPath:false}"
            v-model="innerCondition[name]"
            @visible-change="() => { loadOptionList(el.loadOptionsFuncName) }"
            @keyup.enter.native="query"
          >
          <template slot-scope="{ node, data }">
            <el-tooltip :disabled="data.unitName.length < 11" class="item" effect="dark" :content="data.unitName" placement="top-start">
              <span>{{ data.unitName }}</span>
            </el-tooltip>            
          </template>
          </el-cascader>

其中如果大家没有进行封装的话，可以直接在el-cascader中套用提示信息的Tooltip

<template slot-scope="{ node, data }">
    <el-tooltip :disabled="data.unitName.length < 11" class="item" effect="dark" :content="data.unitName" placement="top-start">
        <span>{{ data.unitName }}</span>
    </el-tooltip>            
</template>

效果图：