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组件的时候,点击下拉菜单,选择一个选项后,选项不会跳到选项卡框中。怎么解决??
解决办法:(这个方法很迂回,简单方法:https://mp.csdn.net/editor/html/109547956)
思路:
- 添加 {{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:这里的功能是:点击按钮增加一个下拉框,但是我增加多个后,多个下拉列表中选中的值是联动一致的。
解决办法:
思路:
- 下拉框添加点击事件,通过索引值设置对应的下拉框
- 在方法上:循环得到下拉框选项个数,把下拉框内容赋给用于存放下拉框内容的数组,再点击下拉框的时候设置点击事件用于获取索引(当前选中的是第几个选项),再之后就是handleCommand方法的处理。
完整代码:
<!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>