vue3+elementPlus:下拉选择框同时获取到选中的id和数据

//在<el-option>里绑定@click事件

//html
<el-select
            value-key="id"
            v-model="filterText"
            multiple
        >
          <el-option
              v-for="item in Lists"
              :key="item.id"
              :label="item.name"
              :value="item"
              @click.native="changeGateway(item)"
             
          />
        </el-select>

//js
const changeGateway=(val)=>{
 if (val.state ===0) {//如果state 为0则按钮变为1
		val.state =1
	// console.log(val.state ,'点击显示');
 }else if(val.state ===1){//如果state 为1则按钮变为0
	    val.state =0
    // console.log(val.state ,"隐藏");
 }//接口
     update({
     id:val.id,
     state :val.state 
        }).then((res)=>{
		Datas=JSON.stringify(res.data.data)
		// console.log(store.state.clickHeaderDatas);		
		getlist()	//此封装函数里绑定了v-model的回显	
  })

}

 const getlist = () => {
              //接口
				list({}).then((res) => {
				let showArr  = res.data.data.filter((item)=>{
  			    return String(item.state)== 1;
				})
				// console.log(showArr,"showArr");//过滤掉为1的数据
				Lists = res.data.data
				res.data.data?.map((v)=>{
         //如果state为1则显示,0隐藏

					if (v.state==1) {
					filterText = showArr //显示选择器v-model
						}
				})
			})
		}

作者上一篇文章,

vue3+百度地图:加载百度地图去除logo_意初的博客-CSDN博客vue3+百度地图:加载百度地图去除logo。https://blog.csdn.net/weixin_43928112/article/details/126925693?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126925693%22%2C%22source%22%3A%22weixin_43928112%22%7D

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值