在 Vue 3 中,#default="scope"
是用于指定一个具名插槽(named slot)的默认插槽,并且向该插槽传递作用域属性(scoped props)。这个语法是在 Vue 3 的模板编译器中引入的,它取代了 Vue 2 中使用的 slot-scope
。
使用Element-plus UI框架获取表格中某一行的数据,如下面的示例代码:
<template>
<div class="tools-div">
<el-button type="success" size="small" @click="addShow">添 加</el-button>
</div>
<el-table :data="list.records" style="width: 100%">
<el-table-column prop="name" label="品牌名称" />
<el-table-column prop="logo" label="品牌图标" #default="scope">
<img :src="scope.row.logo" width="50" />
</el-table-column>
<el-table-column prop="createTime" label="创建时间" />
<el-table-column label="操作" align="center" width="200" #default="scope" >
<el-button type="primary" size="small" @click="editShow(scope.row)">
修改
</el-button>
</el-table-column>
</el-table>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useApp } from '@/pinia/modules/app'
// 数据源
const list = ref({
"records": [
{
"id": 1,
"createTime": "2023-05-06 01:30:27",
"updateTime": "2024-08-04 15:13:38",
"name": "华为",
"logo": "http://139.198.127.41:9000/sph/20230506/小米.png"
},
{
"id": 2,
"createTime": "2023-05-06 01:31:19",
"updateTime": "2024-08-04 15:13:43",
"name": "小米",
"logo": "http://139.198.127.41:9000/sph/20230506/华为.png"
},
{
"id": 10,
"createTime": "2024-08-04 15:31:04",
"updateTime": "2024-08-04 15:31:04",
"name": "samsung",
"logo": "http://localhost:9000/spzx/2024/08/04/74c510e0e7894cd5877f4af5e5e4c478tb.1.78d22143.jpg"
}
]
})
// 修改按钮。获取哦当前行的数据
cconst editShow = (row)=>{
// console.log(row); // 当前行对象的数据
console.log(row.id)
console.log(row.createTime)
console.log(row.updateTime)
console.log(row.name)
console.log(row.logo)
}
</script>
1 brand.vue:79:13
2023-05-06 01:30:27 brand.vue:80:13
2024-08-04 15:13:38 brand.vue:81:13
华为 brand.vue:82:13
http://139.198.127.41:9000/sph/20230506/小米.png
标签:13,console,log,04,08,Element,plus,UI,row
From: https://www.cnblogs.com/lilyflower/p/18344671