<template>
 <el-cascader
    placeholder="请选择"
    v-model="value"
    :options="treeData"
    :style="{ width: width }"
    :props="{
      value: 'id',
      label: 'name',
      children: 'children',
      checkStrictly: true,
    }"
    clearable
    ref="cascader"
    @change="handleChange"
  />
<template>

<script setup lang="ts">
   const value = ref();
   const treeData= ref([
    {
       id:1,
       name:"一级",
       children:[
        {
         id:2,
         name:"二级",
        }
       ]
       ...
    }
   ]);
   const width = ref("200px");//默认宽度
   const cascader = ref();
   function handleChange(value: any) {
     if (value) {
      const labelsLength = cascader.value
      .getCheckedNodes()[0]
      .text.split("/")
      .join("").length;
      width.value = labelsLength * 10 + 100 + "px";
    } else {
      width.value = "200px";
    }
  }
</script>