如下图的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;
}

 

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐