Vue3中Element Plus Table(表格)点击获取对应id方式
作者：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
}
})
})
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。