赞
踩
利用popper-class实现选项框内容过长,截取显示功能:
- <el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- <el-tooltip
- placement="top"
- :disabled="item.label.length<17"
- >
- <div slot="content">
- <span>{{item.label}}</span>
- </div>
- <div class="iclass-text-ellipsis">{{ item.label }}</div>
- </el-tooltip>
- </el-option>
- </el-select>
-
- <script>
- export default {
- data() {
- return {
- options: [{
- value: '选项1',
- label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
- }, {
- value: '选项2',
- label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
- }, {
- value: '选项3',
- label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
- }],
- value: ''
- }
- }
- }
- </script>
-
- <style scoped>
- .el-select {
- width: 300px;
- }
- .el-select ::v-deep .popper-class {
- width: 300px;
- }
- .iclass-text-ellipsis {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- </style>
结果如下:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。