Vue如何获取子元素的宽度总和

Question

如图所示：

父元素通过 flex-grow: 1 获取了宽度，子元素（导航栏）的总体宽度超出了父元素的宽度，在这种情况下，想要实现如下结果：

根据父元素的宽度展示指定个数的子元素，根据图片实际情况，导航栏只展示到 预留导航4位置，剩下的不显示？

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1"><i class="el-icon-s-home"></i><span>首页</span></el-menu-item>
        <template v-for="item in menuItems" :key="item.index">
        <el-menu-item :index="item.index" ref="navMenuItem">
            <i class="el-icon-s-tools"></i>
            <span>{{ item.name }}</span>
        </el-menu-item>
    </template>
</el-menu>

<script>
    export default {
        data() {
            return {
            menuItems: [{
                    index: "2",
                    name: '预留导航1'
                }, {
                    index: "3",
                    name: '预留导航2'
                }, {
                    index: "4",
                    name: '预留导航3'
                }, {
                    index: "5",
                    name: '预留导航4'
                }, {
                    index: "6",
                    name: '预留导航5'
                }, {
                    index: "7",
                    name: '预留导航6'
                }, {
                    index: "8",
                    name: '预留导航7'
                }, {
                    index: "9",
                    name: '预留导航8'
                }, {
                    index: "10",
                    name: '预留导航9'
                }, {
                    index: "11",
                    name: '预留导航10'
                }, {
                    index: "12",
                    name: '预留导航11'
                }, {
                    index: "13",
                    name: '预留导航12'
                }]
            };
        },
    },

Answer 1

ref父元素拿到dom之后用js获取子元素宽度哇，然后根据宽度算你第N个子元素后不显示