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表格实现可编辑单元格
相关文章
vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)
这篇文章主要介绍了vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05vue-resource + json-server模拟数据的方法
本篇文章主要介绍了vue-resource + json-server模拟数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11Vue keepAlive实现不同的路由共用一个组件component的缓存问题(推荐)
这篇文章主要介绍了Vue keepAlive实现不同的路由共用一个组件component的缓存问题,实现方式使用Vue keepAlive实现页面缓存,需要的朋友可以参考下2022-08-08vue中this.$refs有值,但无法获取ref的值问题及解决
这篇文章主要介绍了vue中this.$refs有值,但无法获取ref的值问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01详解element-ui表格中勾选checkbox,高亮当前行
这篇文章主要介绍了详解element-ui表格中勾选checkbox,高亮当前行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论