elementui的select同一个选项连续点击时能连续选中,触发change事件;elementui的el-select中的点击事件native

3 篇文章 0 订阅
2 篇文章 0 订阅

下拉菜单,我需要实现连续插入同一个选项(这里我在项目找那个用的是字符串拼接),实现连续点击某一个选项能连续插入到下面的文本框中。这样就不能使用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实现

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值