el-table-column+el-autocomplete

❓问题：

在table外面修改el-autocomplete的宽度有很多相关的文章，但是找了很多文章结果都没有办法在table里修改el-autocomplete宽度的，最后才知道是要修改el-table的样式

首先要先知道:popper-append-to-body默认为true。

然后因为下拉框el-popper在body里，而不在vue挂载的<div id="#app">里，所以scoped里的样式无法影响到el-autocomplete组件。那么将:popper-append-to-body修改为false，又因为是在el-table里，就会因为行内高度的不够而导致下拉框的内容被隐藏掉。

📖解决方法：

修改el-table的样式

1、给el-autocomplete添加:popper-append-to-body="false"；

2、修改element-ui组件库的样式，如果无效则加上/deep/；

3、如果/deep/报错，那就改成::v-deep即可（因为在vue中，>>>是深度选择器，可以作用到子组件中的样式，而/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep）

⭐代码：

<template>
...
    <el-table-column>
        <template>
          <el-autocomplete
            :popper-append-to-body="false"
          ></el-autocomplete>
        </template>
    </el-table-column>
...
</template>
<style scoped>
/deep/.el-table__body-wrapper,
/deep/.el-table {
  overflow-y: visible;
}
/deep/.el-table .cell {
  box-sizing: border-box;
  overflow: visible !important;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-left: 10px;
  padding-right: 10px;
}
/deep/.el-popper[x-placement^='bottom'] {
  width: auto !important;
}
</style>