使用el-cascader组件的max-collapse-tags属性出现警告，是什么原因 #16455

startjava · 2024-04-11T01:49:17Z

startjava
Apr 11, 2024

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="module" src="5_多选.js"></script>
    </head>
    <body>
        <div id="mydiv1">
            <div>
                <p>Display all tags (default)</p>
                <el-cascader :options="options" :props="props" clearable/>
            </div>
            <div>
                <p>Collapse tags</p>
                <el-cascader :options="options" :props="props" collapse-tags clearable/>
            </div>
            <div>
                <p>Collapse tags tooltip</p>
                <el-cascader
                        :options="options"
                        :props="props"
                        collapse-tags
                        collapse-tags-tooltip
                        clearable
                />
            </div>
            <div>
                <p>Max Collapse Tags</p>
                <el-cascader
                        :options="options"
                        :props="props"
                        collapse-tags-tooltip
                        collapse-tags
                        max-collapse-tags='3'
                        clearable
                />
            </div>
        </div>
    </body>
</html>

import {createApp} from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp({
    setup() {
        const props = {multiple: true}

        const options = [
            {
                value: 1,
                label: 'Asia',
                children: [
                    {
                        value: 2,
                        label: 'China',
                        children: [
                            {value: 3, label: 'Beijing'},
                            {value: 4, label: 'Shanghai'},
                            {value: 5, label: 'Hangzhou'},
                        ],
                    },
                    {
                        value: 6,
                        label: 'Japan',
                        children: [
                            {value: 7, label: 'Tokyo'},
                            {value: 8, label: 'Osaka'},
                            {value: 9, label: 'Kyoto'},
                        ],
                    },
                    {
                        value: 10,
                        label: 'Korea',
                        children: [
                            {value: 11, label: 'Seoul'},
                            {value: 12, label: 'Busan'},
                            {value: 13, label: 'Taegu'},
                        ],
                    },
                ],
            },
            {
                value: 14,
                label: 'Europe',
                children: [
                    {
                        value: 15,
                        label: 'France',
                        children: [
                            {value: 16, label: 'Paris'},
                            {value: 17, label: 'Marseille'},
                            {value: 18, label: 'Lyon'},
                        ],
                    },
                    {
                        value: 19,
                        label: 'UK',
                        children: [
                            {value: 20, label: 'London'},
                            {value: 21, label: 'Birmingham'},
                            {value: 22, label: 'Manchester'},
                        ],
                    },
                ],
            },
            {
                value: 23,
                label: 'North America',
                children: [
                    {
                        value: 24,
                        label: 'US',
                        children: [
                            {value: 25, label: 'New York'},
                            {value: 26, label: 'Los Angeles'},
                            {value: 27, label: 'Washington'},
                        ],
                    },
                    {
                        value: 28,
                        label: 'Canada',
                        children: [
                            {value: 29, label: 'Toronto'},
                            {value: 30, label: 'Montreal'},
                            {value: 31, label: 'Ottawa'},
                        ],
                    },
                ],
            },
        ]

        return {options, props}
    }
});
app.use(ElementPlus)
app.mount("#mydiv1");

最后一个组件在运行时，F12出现警告：

感谢

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

使用el-cascader组件的max-collapse-tags属性出现警告，是什么原因 #16455

{{title}}

Replies: 0 comments

Select a reply

使用el-cascader组件的max-collapse-tags属性出现警告，是什么原因 #16455

startjava Apr 11, 2024

Replies: 0 comments

startjava
Apr 11, 2024