el-autocomplete 设置宽度

您可以使用 el-autocomplete 的属性 :popper-class 来设置宽度。具体方法如下：

1. 首先，给 el-autocomplete 组件添加一个 ref，例如：ref="autocomplete"。

2. 在 el-autocomplete 组件中添加 :popper-class 属性，并将其设置为一个函数。

3. 在函数中，获取到 el-autocomplete 组件的宽度，然后返回一个对象，该对象包含一个名为 .el-autocomplete-suggestion的属性，并将其宽度设置为与 el-autocomplete 组件一样的宽度。

4. 代码示例如下：

<el-autocomplete ref="autocomplete" :popper-class="setPopperWidth"></el-autocomplete>

methods: {
  setPopperWidth() {
    const width = this.$refs.autocomplete.$el.clientWidth;
    return { '.el-autocomplete-suggestion': `width: ${width}px` };
  }
}

这样就可以设置 el-autocomplete 组件的宽度了。

相关问题

el-autocomplete 如何设置宽度

el-autocomplete 可以通过设置 input 组件的 style 属性来设置宽度。例如：

<el-autocomplete
  v-model="value"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
>
  <template slot-scope="{ item }">
    <div class="item">{{ item.value }}</div>
  </template>
  <el-input
    :style="{ width: '200px' }"
    slot="reference"
    v-model="value"
    :placeholder="'请输入内容'"
  ></el-input>
</el-autocomplete>

在上面的代码中，我们通过 `:style="{ width: '200px' }"` 来设置了输入框的宽度为 200px。你可以根据实际情况来设置宽度。

el-autocomplete设置输入框的最大宽度

你可以通过设置 el-autocomplete 组件的样式来限制输入框的最大宽度。具体做法如下：

1. 给 el-autocomplete 组件添加一个类名，比如 "my-autocomplete"：

<el-autocomplete class="my-autocomplete"></el-autocomplete>

2. 使用 CSS 样式来设置该类名的最大宽度，比如设置为 300px：

.my-autocomplete .el-input__inner {
  max-width: 300px;
}

这样就可以限制 el-autocomplete 组件输入框的最大宽度为 300px，你可以根据实际需求进行调整。