elementui下拉框能否向上展开 element的下拉列表

转载

imking 2024-03-29 08:16:05

文章标签 elementui下拉框能否向上展开下拉框 ico 下拉菜单 文章分类 机器学习人工智能

vue 的elementUI里的下拉框，点击之后，选项不能回写，做以下修改。

下面是elementUI的基本代码，https://element.eleme.cn/#/zh-CN/component/dropdown

<el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

问题1：使用element ui组件的时候，点击下拉菜单，选择一个选项后，选项不会跳到选项卡框中。怎么解决？？

思路：

添加 {{selectedText}}，
在选项el-dropdown-item中加入绑定index，且循环下拉列表的选项，
再写一个方法 handleCommand，把对应下标的选项放入selectedText中( this.selectedText = this.shuju[command].name;)

<el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
        <span>{{selectedText}}</span><i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command='index' v-for="(x,index) in shuju">{{x.name}}</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
   <script>
        var demo = new Vue({
            el: '#main',
            data: {
                shuju: [{
                    name: "孙",
                }, {
                    name: "猪",
                }, {
                    name: "沙",
                }],
                selectedText: '下拉菜单'
            },
            methods: {
                handleCommand(command) {
                    this.selectedText = this.shuju[command].name;
                }
            }
        });
    </script>

Element UI - 组件 - Dropdown 下拉菜单 - 开发者手册 - 云+社区 - 腾讯云 https://cloud.tencent.com/developer/section/1489899

问题2：这里的功能是：点击按钮增加一个下拉框，但是我增加多个后，多个下拉列表中选中的值是联动一致的。

elementui下拉框能否向上展开 element的下拉列表_下拉框

解决办法：

思路：

下拉框添加点击事件，通过索引值设置对应的下拉框

elementui下拉框能否向上展开 element的下拉列表_elementui下拉框能否向上展开_02

在方法上：循环得到下拉框选项个数，把下拉框内容赋给用于存放下拉框内容的数组，再点击下拉框的时候设置点击事件用于获取索引（当前选中的是第几个选项），再之后就是handleCommand方法的处理。

elementui下拉框能否向上展开 element的下拉列表_下拉框_03

完整代码：

<!DOCTYPE html>
<html>
<!-- 思路：
 -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue下拉菜单</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <!-- element引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element引入样式引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>
    <div id="main">
        <input type="button" value="添加查询" class="btn btn-primary" @click="addSearch()">
        <div v-for="(d,index) in counter" :key="index" style="border:1px solid red">
            <!-- 方式一：通过select -->
            <!-- <select v-model="one">
                <option v-for="x in shuju">{{x.name}}</option>
            </select><br> -->

            <!-- 方式二：通过element下拉组件-->
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link" @click="setCurentIndex(index)">
                    <span>{{selectedText[index]}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="id" v-for="(x, id) in shuju[index]" :key="id">
                        {{x.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- <input type="text"> -->
        </div>
    </div>
    <script>
        var demo = new Vue({
            el: '#main',
            data: {
                shuju: [],
                currentIndex: 0,
                // one: "",
                counter: [],
                selectedText: []
            },
            methods: {
                addSearch: function() {
                    this.counter.push({}); //这是你原来自己写的，每点击一次添加查询，往counter里加一个空对象，用作计数；
                    var arrTamp = [{
                        name: "孙悟空",
                    }, {
                        name: "猪八戒",
                    }, {
                        name: "沙和尚",
                    }];
                    for (var i in arrTamp) {
                        arrTamp[i].index = this.counter.length - 1; //第一次，index为0；
                    }

                    // arrTamp = [
                    //     {index: 0,name:"孙"}, { index: 0, name: "猪" }, { index: 0, name: "沙" }
                    // ]

                    this.shuju.push(arrTamp);

                    /**
                     *  最后拼成的数据
                     *  index标记这是第几个下拉框 
                     *  shuju = [
                     *      [{ index: 0, name: "孙" }, { index: 0, name: "猪" }, { index: 0, name: "沙" }],     这是第一个下拉框的数据
                     *      [{ index: 1, name: "孙" }, { index: 1, name: "猪" }, { index: 1, name: "沙" }],     这是第二个下拉框的数据
                     *      [{ index: 2, name: "孙" }, { index: 2, name: "猪" }, { index: 2, name: "沙" }],     这是第三个下拉框的数据
                     *      [{ index: 3, name: "孙" }, { index: 3, name: "猪" }, { index: 3, name: "沙" }],     这是第四个下拉框的数据
                                                                                                               .
                     *  ]
                     */

                    this.selectedText.push('下拉菜单');
                    // console.log(this.selectedText);
                    // console.log(this.shuju);
                },
                setCurentIndex(index) {
                    // console.log(index);
                    this.currentIndex = index;
                },
                handleCommand(command) {
                    // console.log(command);
                    // console.log(this.selectedText[this.currentIndex]);
                    // console.log(this.shuju[this.currentIndex][command].name);
                    this.selectedText[this.currentIndex] = this.shuju[this.currentIndex][command].name; //选择后，显示选择了哪一个
                    this.selectedText = this.selectedText.slice(); //复制selectedText，解决vue中改变数组中的值，视图不刷新问题；？？
                    // console.log(this.selectedText);
                }
            }
        });
    </script>
</body>

</html>

在项目整合的时候的几点修复：

<!DOCTYPE html>
<html>
<!-- Bella：vue-elementui的下拉框，点击选项后不能将选项回写，特此修复 -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue下拉菜单修复版</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <!-- element引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element引入样式引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <!-- Bella：需求3、添加下拉框，可以模糊查询又可以下拉框的修复版？？未实现 -->
    <div id="main3">
        <input type="button" value="添加查询" class="btn btn-primary" @click="addSearch()">

        <div v-for="(d,index) in counter" :key="index" style="border:1px solid red">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link" @click="setCurentIndex(index)">
                    <span>{{selectedText[index]}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="id" v-for="(x, id) in addSearchData[index]" :key="id">
                        {{x.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <input type="text">
        </div>
        <!-- 下拉框 -->
        <el-dropdown @command="handleCommand1">
            <span class="el-dropdown-link">
            <span>{{selectedText1}}</span><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command='index' v-for="(x,index) in shuju1">{{x.name}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

    </div>
    <script>
        var demo = new Vue({
            el: '#main3',
            data: {
                scheduleIndex: 0, // 当前选择的进度索引
                index: 0,
                addSearchData: [],
                counter: [],
                selectedText: [],
                selectedText1: '请选择',
                addSearchData: [],
                shuju1: [{
                    name: "孙",
                }, {
                    name: "猪",
                }, {
                    name: "沙",
                }],
            },
            methods: {
                addSearch: function() { //增加查询框的下拉列表
                    this.counter.push({});
                    // 可增加的搜索项
                    var arrTamp = [{
                        name: "型号规格",
                    }, {
                        name: "生产厂家",
                    }, {
                        name: "元器件名称",
                    }, {
                        name: "需求提出人",
                    }, {
                        name: "需求单号",
                    }, {
                        name: "需求入库日期",
                    }];
                    for (var i in arrTamp) {
                        arrTamp[i].index = this.counter.length - 1;
                        console.log("第几个下拉框" + arrTamp[i].index)
                    }
                    // debugger
                    this.addSearchData.push(arrTamp);
                    this.selectedText.push('下拉菜单');
                },
                setCurentIndex(index) { // 点击下拉按钮触发
                    // console.log(index);
                    this.currentIndex = index;
                },
                handleCommand(command) { //选中下拉选项，返到框中
                    // console.log(command)
                    this.selectedText[this.currentIndex] = this.addSearchData[this.currentIndex][command].name;
                    this.selectedText = this.selectedText.slice();
                },
                handleCommand1(command) {
                    console.log('command:' + command)
                        // command就是索引
                    this.selectedText1 = this.shuju1[command].name;
                    console.log('this.selectedText1:' + this.selectedText1)

                }
            }
        });
    </script>
    <!-- Bella：需求0、下拉框能会写选项的修复版 -->

    <!-- <div id="main">
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
            <span>{{selectedText}}</span><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command='index' v-for="(x,index) in shuju">{{x.name}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <script>
        var demo = new Vue({
            el: '#main',
            data: {
                shuju: [{
                    name: "孙",
                }, {
                    name: "猪",
                }, {
                    name: "沙",
                }],
                selectedText: '下拉菜单'
            },
            methods: {
                handleCommand(command) {
                    this.selectedText = this.shuju[command].name;
                }
            }
        });
    </script> -->

    <!-- Bella：需求1、可添加下拉框的修复版 -->
    <!-- <div id="main1">
        <input type="button" value="添加查询" class="btn btn-primary" @click="addSearch()">
        <div v-for="(d,index) in counter" :key="index" style="border:1px solid red">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link" @click="setCurentIndex(index)">
                    <span>{{selectedText[index]}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="id" v-for="(x, id) in addSearchData[index]" :key="id">
                        {{x.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <input type="text">
        </div>
    </div>
    <script>
        var demo = new Vue({
            el: '#main1',
            data: {
                scheduleIndex: 0, // 当前选择的进度索引
                index: 0,
                addSearchData: [],
                counter: [],
                selectedText: [],
                addSearchData: [],
            },
            methods: {
                addSearch: function() { //增加查询框的下拉列表
                    this.counter.push({});
                    // 可增加的搜索项
                    var arrTamp = [{
                        name: "型号规格",
                    }, {
                        name: "生产厂家",
                    }, {
                        name: "元器件名称",
                    }, {
                        name: "需求提出人",
                    }, {
                        name: "需求单号",
                    }, {
                        name: "需求入库日期",
                    }];
                    for (var i in arrTamp) {
                        arrTamp[i].index = this.counter.length - 1;
                        console.log("第几个下拉框" + arrTamp[i].index)
                    }
                    // debugger
                    this.addSearchData.push(arrTamp);
                    this.selectedText.push('下拉菜单');
                },
                setCurentIndex(index) { // 点击下拉按钮触发
                    // console.log(index);
                    this.currentIndex = index;
                },
                handleCommand(command) { //选中下拉选项，返到框中
                    // console.log(command)
                    this.selectedText[this.currentIndex] = this.addSearchData[this.currentIndex][command].name;
                    this.selectedText = this.selectedText.slice();
                },
            }
        });
    </script> -->

    <!-- Bella：需求2、多个下拉框并存的修复版 -->
    <!-- <div id="main2">
        <label>第一个</label>
        <el-dropdown @command="handleCommand1">
            <span class="el-dropdown-link">
            <span>{{selectedText1}}</span><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command='index' v-for="(x,index) in shuju1">{{x.name}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <label>第2个</label>
        <el-dropdown @command="handleCommand2">
            <span class="el-dropdown-link">
            <span>{{selectedText2}}</span><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command='index' v-for="(x,index) in shuju2">{{x.name}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <script>
        var demo = new Vue({
            el: '#main2',
            data: {
                selectedText1: [],

                selectedText2: [],

                shuju1: [{
                    name: "孙",
                }, {
                    name: "猪",
                }, {
                    name: "沙",
                }],
                shuju2: [{
                    name: "王",
                }, {
                    name: "李",
                }, {
                    name: "赵",
                }],
                selectedText: '下拉菜单'
            },
            methods: {
                handleCommand1(command) {
                    this.selectedText1 = this.shuju1[command].name;
                },
                handleCommand2(command) {
                    this.selectedText2 = this.shuju2[command].name;
                }
            }
        });
    </script> -->
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。