笔记：Iview-UI 级联选择器Cascader 支持每次只显示最后点击的那一项

最新推荐文章于 2024-07-12 17:15:29 发布

原创最新推荐文章于 2024-07-12 17:15:29 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #elementui #vue.js

本文介绍如何解决 iView Cascader 组件中因选项过长导致显示不全的问题。通过使用 render-format 属性及自定义函数，仅展示级联选择器的最后一项，从而改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：有时候选项option太长如果按照iview的习惯会每一层级都会显示所以导致显示不全的问题

如图：

设想一下如果只显示最后一项就能完美解决。

代码👇：
PS：可以通过 render-format 来解决同样这个方法也可以接收一个函数来自定义。

<template>
    <Cascader :data="data" :render-format="format"></Cascader>
</template>
<script>
    export default {
        data () {
            return {
                data: [],
            }
        },
        methods: {
            format (labels, selectedData) {
                const index = labels.length - 1;
                return labels[index];
            }
        }
    }
</script>