展开
拓展 关闭
订阅号推广码
GitHub
视频
公告栏 关闭

element ui获取表格某一行的id

<template>
<div>
<el-table
class = "table"
:data="BlogList"
style="width: 100%"
:row-class-name="tableRowClassName"
border
stript
>
<el-table-column type="index" label="#" />
<el-table-column prop="id" label="id" width="100" />
<el-table-column prop="uid" label="用户id" width="120" />
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" width="120" />
<el-table-column :show-overflow-tooltip="true" prop="mdContent" label="md" width="250" />
<el-table-column :show-overflow-tooltip="true" prop="htmlContent" label="html" width="80" />
<el-table-column :show-overflow-tooltip="true" prop="publishDate" label="发布时间" width="80" />
<el-table-column prop="editTime" label="修改时间" width="180" />
<el-table-column prop="states" label="状态" width="180" />
<el-table-column label="操作" width="300">
<!-- <el-tooltip
class="item"
effect="dark"
content="修改用户信息"
placement="top-start"
:enterable="false"
>
<el-button type="primary" :icon="Edit" size="mini">修改</el-button>
</el-tooltip>
<el-button type="primary" :icon="Share" size="mini">删除</el-button>
<el-button type="primary" :icon="Delete" size="mini">设置</el-button> -->
<template #default="scope">
<el-button type="text" @click="Look(scope.row.id)">查看</el-button>
<el-button type="text" @click="UpdateBlog(scope.row.id)">修改</el-button>
<el-button type="text" @click="delBlog(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script lang = "ts" scoped>
export default {
data() {
return {
BlogList: []
}
},
methods: {
async getUserList(){
const {data: res} = await this.$http.post("articlemanagement/getAll")
console.log(res)
this.BlogList = res.data;
},
Look(id){
console.log("" + id)
window.sessionStorage.setItem('blog_id', id)
this.$router.push('/blogDetails')
},
UpdateBlog(id){
window.sessionStorage.setItem('update_blog', id)
this.$router.push('/updateBlog')
},
delBlog(id){
const reqData = {
id: id
}
this.$http.post("article/deleteOne", reqData).then((response)=>{
if(response.data.code == 200 ) {
alert("删除成功!")
}else {
alert("删除失败!!")
}
}).catch(error=>{console.error(error)});
}
},
created(){
this.getUserList();
}
}
</script>
<style lang = "less" scoped>
</style>
posted @   DogLeftover  阅读(89)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
历史上的今天:
2021-07-22 ubuntu入门
点击右上角即可分享
微信分享提示