如何设置使得el-menu-item的宽度自动适应并与其父元素el-sub-menu的宽度保持一致？

为了使`el-menu-item`的宽度自动适应其父元素`el-sub-menu`的宽度，你需要利用一些CSS技巧或者监听`el-sub-menu`的变化。下面是一种基于CSS的方法：

1. **使用CSS Flexbox**：
如果`el-sub-menu`使用了Flex布局，你可以让`el-menu-item`也采用flex，并设置它作为子元素的主轴宽度：

   el-sub-menu {
       display: flex;
       justify-content: space-between; /* 根据需求调整空间分布 */
   }

   el-menu-item {
       flex: 1; /* 自动增长至可用空间 */
   }

2. **使用CSS Grid**：
如果`el-sub-menu`是Grid布局，那么可以让`el-menu-item`成为网格单元格：

   el-sub-menu {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); /* 自动填充等宽列 */
   }

   el-menu-item {
       /* 使用grid-column或grid-row-start/row-end来定位 */
   }

3. **使用Vue.js的计算属性或事件监听**：
如果你是在Vue项目中，可以使用`v-bind:style`绑定一个计算属性，这个属性会根据`el-sub-menu`的实际宽度动态计算`el-menu-item`的宽度：

   computed: {
      itemWidth() {
        return `${this.$refs.subMenu.clientWidth}px`;
      }
   },
   
   template: `
   <el-menu-item :style="{ width: itemWidth }"></el-menu-item>
   `

这里假设`subMenu`是你的`el-sub-menu`的实例引用。

请注意，上述示例假设你已经在Vue组件中正确地设置了`ref`。根据你的具体项目结构和需求选择合适的方法。