Element-plus UI框架获取表格中某一行的对象数据

在 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