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
}
})
})
}总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue3 element plus table selection展示数据,默认选中功能方式
- element-plus的el-table自定义表头筛选查询功能实现
- Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法
- vue3使用element-plus再次封装table组件的基本步骤
- vue3使用elementPlus进行table合并处理的示例详解
- vue3+element Plus实现在table中增加一条表单数据的示例代码
- vue3+elementplus基于el-table-v2封装公用table组件详细代码
- vue3 elementplus table合并写法
- Element UI/Plus中全局修改el-table默认样式的解决方案
- ElementPlus Table表格实现可编辑单元格
