问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在el-select中选择框内容超出时实现换行？

头像
稳重的生菜
    514
    新手上路，请多包涵

    请问下el选择框选中的内容超出时怎么给他换行 盒子宽度不变

    <el-form-item label="运送终点">
                  <el-select
                    size="mini"
                    v-model="form.pathList[form.pathList.length - 1].pointId"
                    style="width:100%"
                    placeholder="请选择运送终点"
                    filterable
                  >
                    <el-option
                      v-for="(item,index) in pointlist"
                      :key="index"
                      :label="item.pointName + '/' + ( item.buildName + item.floorName + item.deptName)"
                      :value="item.id"
                    >
                      <span style="float: left">{{ item.pointName }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.buildName }}{{ item.floorName }} {{ item.deptName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>

    这是原结构 试了网上几个方法都没有效果 老板要求把这一段所有的内容在一个选中框内显示出来 （表单内容皆不为真实数据）

    vue.js
    阅读 3.4k
    avatarAI BotBETA

    在 Element UI 的 el-select 组件中，通常情况下，当选项内容过长超出选择框宽度时，内容并不会自动换行，而是会被截断显示。要实现内容超出时自动换行，你需要自定义 el-option 的渲染方式，以便在内容过长时能够自动换行。

    这里有一个方法可以通过 CSS 来实现这一点。你可以给 el-option 中的内容设置一个合适的宽度，并允许它在必要时换行。由于 el-option 的子元素默认是 inline-block 或 inline 类型的，你需要将它们更改为 block 或 inline-block 并设置合适的宽度。

    下面是一个修改后的代码示例，展示了如何设置 el-option 的内容以在必要时换行：

    <template>
  <el-form-item label="运送终点">
    <el-select
      size="mini"
      v-model="form.pathList[form.pathList.length - 1].pointId"
      style="width: 100%"
      placeholder="请选择运送终点"
      filterable
    >
      <el-option
        v-for="(item, index) in pointlist"
        :key="index"
        :label="formattedLabel(item)"
        :value="item.id"
      ></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      form: {
        pathList: [
          // 初始化你的数据
        ],
      },
      pointlist: [
        // 初始化你的数据
      ],
    };
  },
  methods: {
    formattedLabel(item) {
      return (
        `<div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${item.pointName}</span>
          <span style="width: 45%; color: #8492a6; font-size: 13px; white-space: normal;">
            ${item.buildName} ${item.floorName} ${item.deptName}
          </span>
        </div>`
      );
    },
  },
};
</script>

    在这个示例中，我使用了一个 formattedLabel 方法来格式化每个选项的标签。这个方法返回一个包含两个 span 元素的 div，其中每个 span 都有其自己的宽度和换行行为。第一个 span（包含 pointName）设置了 white-space: nowrap 和 overflow: hidden，以及 text-overflow: ellipsis，以确保在内容过长时显示省略号而不是换行。第二个 span（包含其余信息）设置了 white-space: normal，以允许在必要时自动换行。

    请注意，由于 Element UI 的 el-option 组件可能不会正确渲染这种包含 HTML 的标签，你可能需要使用其他方法或组件来实现这一点，或者根据你的具体需求和项目上下文进行调整。此外，这种方法可能会受到 Element UI 版本和具体实现的影响，因此请根据你的实际情况进行调整。

    1 个回答
    得票最新
    头像
    XiongMiao
      6411515
      ✓ 已被采纳

      el-select内容是放在一个<input>中的 应该是没办法换行,我们可以换个方式,不用el-select来显示内容,使用<div>来替代它,这样就能换行了,然后点击<div>的时候把el-select显示出来并点击就好了
      https://codepen.io/h2278624265/pen/yLrRdOv

      查看全部 1 个回答
      推荐问题