利用el-tooltip来对el-select选项过长进行优化

最新推荐文章于 2024-08-21 17:01:49 发布

SmallTeddy

最新推荐文章于 2024-08-21 17:01:49 发布

阅读量6k

点赞数 13

分类专栏： Vue 文章标签： vue python 数据可视化

SmallTeddy

本文链接：https://blog.csdn.net/SmallTeddy/article/details/118605678

版权

Vue 专栏收录该内容

48 篇文章 12 订阅

订阅专栏

这篇博客展示了如何利用Element-UI组件解决选项过长导致的布局问题。通过添加省略号并在鼠标悬停时显示完整信息，实现了优化后的效果。示例中包含了具体的HTML、Vue和Element-UI代码实现，适用于前端开发中的下拉选择组件优化。

摘要由CSDN通过智能技术生成

1、缺陷演示

可以看到当选项过长时，会撑开选项框。
在这里插入图片描述

2、优化后效果演示

主要是做出的省略操作，并且鼠标移动上去显示全部的信息。
在这里插入图片描述

3、代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VueDemo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .w-100 {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="main">
    <el-button @click="openDialog">查看</el-button>
    <el-dialog title="表单" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
      <el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
        <el-form-item prop="data" label="测试数据列表">
          <el-select class="w-100" v-model="form.data" remote
            placeholder="请输入查询字段" clearable filterable>
            <el-option v-for="v in dataItems" :key="v.id" :label="v.label" :value="v.value">
              <el-popover v-if="v.label.length >= 40" placement="top-start" width="400" trigger="hover">
                 <p>{{ v.label }}</p>
                <span slot="reference">{{ v.label.slice(0,37) + '...' }}</span>
              </el-popover>
              <span v-else>{{ v.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <script>
    var vm = new Vue({
      el: '.main',
      data() {
        return {
          dialogVisible: false,
          dataItems: [
            { id: 1, label: '短数据测试', value: '短数据'},
            { id: 2, label: '长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试长数据测试', value: '长数据'}
          ],
          form: {
            data: ''
          }
        };
      },
      methods: {
        handleClose(done) {
          this.$confirm("确认关闭？")
            .then((_) => {
              done();
            })
            .catch((_) => { });
        },
        openDialog() {
          this.dialogVisible = true;
        },
        closeDialog() {
          this.dialogVisible = false;
        }
      }
    })
  </script>
</body>

</html>