element里面的el-cascader组件宽度会根据里面的数据自动延伸，也就导致了一下这种情况

这个时候咋们可以直接设置他的最大宽度，就可以限制他的自由延伸

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

这个语句不能写在scoped里面，会失效

但是这也有一个新的问题，那就是有部分内容被遮挡，这个时候就需要我们的另一个组件上场了——el-tooltip
咱们使用el-cascader里面的插槽，对文本直接进行处理，限制长度大于12就有内容提示。

<el-cascader
 v-model="value"
 :options="list">
   <template slot-scope="{ data }">
     <el-tooltip
       :disabled="data.label.length < 12"
       class="item"
       effect="dark"
       :content="data.label"
       placement="right"
     >
      <span>{{ data.label }}</span>
    </el-tooltip>
  </template>
</el-cascader>

注意：有时候会导致提示组件定位不准确，需要手动调整！