下拉菜单,我需要实现连续插入同一个选项(这里我在项目找那个用的是字符串拼接),实现连续点击某一个选项能连续插入到下面的文本框中。这样就不能使用v-model,改用:value;change事件改用成options的点击事件
这样在连续点击同一个时候也能触发change事件了
<template>
<div>
<h4>临时文件</h4>
<el-select class="selectStyle" :value="fields_id"
placeholder="插入自定义字段" filterable blur>
<el-option v-for="(item,value) in options" :key="value" :label="item.label"
:value="item.label" @click.native="insertField(item.label)">
</el-option>
</el-select>
<div style="height:150px;"></div>
<textarea :rows="8" :cols="110" placeholder="请输入内容" id="" v-model="saveData" ></textarea>
</div>
</template>
<script>
export default {
data(){
return{
fields_id:'',
saveData:'',
options:[
{value:1,label:'mobile'},
{value:2,label:'name'},
{value:3,label:'nick'}
]
}
},
methods:{
insertField(label){
this.fields_id = label;
if(this.saveData == ''){
this.saveData = ''
}
this.saveData += '${' + this.fields_id + '}'
}
}
}
</script>
ok实现