Vue3中Element Plus Table(表格)点击获取对应id方式

 更新时间:2023年10月13日 10:51:02   作者:weixin_51204324  
这篇文章主要介绍了Vue3中Element Plus Table(表格)点击获取对应id方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3 Element Plus Table(表格)点击获取对应id

网上搜到的内容或许适用于 Vue 2 或 Element UI,不适用 Vue 3 和 Element Plus。

Template

<el-table-column label="配置" width="120" align="center">
  <template **v-slot="scope"**>
    <el-button link type="primary" size="small">编辑</el-button>
    <el-button link type="primary" @click="deleteNavigation(scope.row.id)" size="small">删除
    </el-button>
  </template>
</el-table-column>

Script

function deleteNavigation(id) {
  console.log(id);
}

使用 Vue 的 v-slot 指令,这个指令中是 Vue 2.6 新增的,取代了以前的 slot 和 slot-scope,而我使用的是 Vue 3,所以网上搜到的很多使用 slot-scope 的方法都失效了。

使用 插槽名.row 可以获取一行的内容,如果要获取行内的某一个字段的值,只需要再点出它的字段名,在我的代码里,就是 scope.row.id

如果要获取行的索引,使用 插槽名.$index,注意 $ 符号是必不可少的,否则将不起作用。

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 实现网页背景水印功能的示例代码

    Vue3 实现网页背景水印功能的示例代码

    这篇文章主要介绍了Vue3 实现网页背景水印功能,这里水印的字体大小、颜色和排布参考了企业微信的背景水印,使得看起来不那么突兀,需要的朋友可以参考下
    2022-08-08
  • 对vue中methods互相调用的方法详解

    对vue中methods互相调用的方法详解

    今天小编就为大家分享一篇对vue中methods互相调用的方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 在vue项目中使用Jquery-contextmenu插件的步骤讲解

    在vue项目中使用Jquery-contextmenu插件的步骤讲解

    今天小编就为大家分享一篇关于在vue项目中使用Jquery-contextmenu插件的步骤讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 使用Vue3实现倒计时器及倒计时任务的完整代码

    使用Vue3实现倒计时器及倒计时任务的完整代码

    文章介绍了如何使用Vue3和Element-plus开发一个倒计时器和倒计时任务管理界面,倒计时器具备手动设置、开始、暂停和重启功能,文章还提供了倒计时器的完整代码,包括HTML、JavaScript和CSS部分,感兴趣的朋友一起看看吧
    2024-11-11
  • Vite项目中打包环境变量教程

    Vite项目中打包环境变量教程

    本文详细介绍了在Vite项目中配置和使用环境变量的完整流程,帮助开发者安全高效地管理不同环境下的应用配置,感兴趣的可以了解下
    2026-06-06
  • vue2使用思维导图jsmind的详细代码

    vue2使用思维导图jsmind的详细代码

    jsMind是一个基于Js的思维导图库,jsMind是一个纯JavaScript类库,用于创建、展示和操作思维导图,这篇文章主要给大家介绍了关于vue2使用思维导图jsmind的详细代码,需要的朋友可以参考下
    2024-06-06
  • Vue组件数据传递与props校验方式

    Vue组件数据传递与props校验方式

    这篇文章主要介绍了Vue组件数据传递与props校验方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue单文件组件的实现

    vue单文件组件的实现

    最近翻阅了一下vue。发觉有一个单文件组件之前基本忽视掉了。所以本文就详细的介绍了vue单文件组件的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue中Props与Attrs的实现实例

    vue中Props与Attrs的实现实例

    本文主要介绍了vue中Props与Attrs的实现实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-09-09
  • Vue必学知识点之forEach()的使用

    Vue必学知识点之forEach()的使用

    在前端开发中,经常会遇到一些通过遍历循环来获取想要的内容的情形,这时候就需要用到forEach()了,下面这篇文章主要给大家介绍了关于Vue必学知识点之forEach()使用的相关资料,需要的朋友可以参考下
    2021-05-05

最新评论