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

意初

已于 2022-09-28 18:01:17 修改

阅读量7.7k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui 前端 ecmascript

于 2022-09-23 01:03:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43928112/article/details/127002818

该博客介绍了在Vue3中如何使用el-select组件，并结合JavaScript实现选项状态的切换。当用户点击el-option时，根据选项的state属性改变其值，同时通过update接口更新数据。此外，getlist函数用于获取并过滤数据，确保state为1的选项显示。文章还涉及了数据绑定和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//在<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_意初的博客-优快云博客vue3+百度地图：加载百度地图去除logo。https://blog.youkuaiyun.com/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