vue select下拉框选项内容过长显示问题

如下图的select下拉框的选项的内容过长时，页面显示不协调，通过如下方法把过长的内容用...代替；

在<el-select中添加popper-class="popper-class"和:popper-append-to-body="false"；

<el-col :span="6">
            <el-col style="line-height: 40px" :span="5"> 任务名称 </el-col>
            <el-col :span="18">
              <el-select
                v-model="value[1]"
                filterable
                :clearable="true"
                placeholder="请选择"
                popper-class="popper-class"
                :popper-append-to-body="false"
              >
                <!-- <el-option
                  v-for="(item, i) in options[1]"
                  :key="item.name + '' + i"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option> -->
                <el-option
                  label="wr士大夫士大夫士大夫五分官方单个热和肉体和合同和肉体和他人微软豆腐干豆腐干"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-col>

在style中添加.el-select ::v-deep .popper-class {   width: 200px; }

#sx .el-row .el-select ::v-deep .popper-class {
  width: 200px;
}