解决element-ui的el-select里的input宽度无法动态改变导致遮挡的问题

现象：

由于select的options选项长短不一，但是这个select的宽度是钉死的，尝试各种方法去覆盖样式也没用

解决方案：

通过用原生js，根据label的长度结合select的change事件，动态计算并改动select的宽度

代码：

          <div class="chat-home-mobile__footer-select">
            <el-select v-model="aiId" @change="handleAgentChange">
              <el-option
                v-for="item in agentListData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          
          methods: {
            handleAgentChange(val) {
              // 动态设置input的宽度
              const label =
                this.agentListData.find((item) => item.value === val)?.label || "";
              const inputElement = document.querySelector(
                ".chat-home-mobile__footer-content .el-input__inner"
              );
              let labelLength = label.length >= 15 ? 15 : label.length;
              if (inputElement) {
                inputElement.style.width = labelLength * 14 + 50 + "px";
              }
            }
        }