首页 > 其他分享 >Element-plus UI框架获取表格中某一行的对象数据

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

时间:2024-08-06 10:41:19浏览次数:9  
标签:13 console log 04 08 Element plus UI row

在 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

相关文章

  • selenium webdriver出现Element is not currently visible and so may not be interac
    问题分析可能是没有加载完成,元素找不到。元素加载完成,但是元素需要点击按钮,才会触发元素插入进来元素加载完成,看到的值和实际后台传输的值是不一致的元素加载完成,本质是只有属性,是没有值的。看到的都是临时函数调用显示出来的解决方案针对第一种可以适当延长休眠时间来......
  • 使用rewriteBatchedStatements属性优化Mybatis-Plus批量插入数据(转)
    原文:https://blog.csdn.net/mcband/article/details/131530297前言由于项目是使用MyBatis-Plus开发的,用起来也确实比较方便,尤其是service层封装好的一些通用的增删改查方法,省去了不少sql语句的书写,但是在开发过程中,我也发现MyBatis-Plus的saveBatch批量插入方法针对MySQL数据库可......
  • StringBuffer和StringBuilder
    StringBuffer和StringBuilder在Java中,StringBuffer和StringBuilder是两个用于字符串操作的类,它们都继承自AbstractStringBuilder类。这两个类提供了一种可变的字符序列,可以用来构建和修改字符串。StringBuffer和StringBuilder的共同点:两者都可以用来创建一个可变的字......
  • String,StringBuilder,StringBuffer
    目录String类创建字符串字符串长度连接字符串创建格式化字符串字符串常量池常见方法charAt(intindex)startWith()endsWithsubstring()split()trim()concat()正则表达式正则表达式实例字符通配符次数通配符其他通配符java.util.regex包捕获组StringBuffer和StringBuilderStringBu......
  • 鸿蒙UI系统组件15——画布(Canvas)
    如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下方名片,关注公众号,公众号更新更快,同时也有更多学习资料和技术讨论群。⭐️ 概 述      前一章我们学习了Shape绘制来绘制自定义形状,在实际的业务开发中,有可能我们需要绘制更复杂的图形,例如统计图中的饼图、......
  • 1、.Net UI框架:Xamarin Forms - .Net宣传系列文章
    Xamarin.Forms是一个跨平台移动应用开发框架,它允许开发者使用C#和.NET进行一次编码,然后在iOS、Android、macOS和Windows等多个平台上运行。Xamarin.Forms是Xamarin的一部分,而Xamarin是微软的.NET跨平台开发工具集,它提供了一套API,可以在不同的设备上创建本地UI。Xama......
  • UITableView的原理——探究及重新实现代码
    转自简书,原文地址,本文主要探讨一些特殊细节,像视图重用这类最基本的原理可在源码里查看。先前重新实现了一个list容器视图,由于Apple没有开源,在此分享过程中探索到的UITableView一些细节。MPTableView:AlistviewlikeUITableView,morefast,morefeatures.1·捉摸不定的con......
  • Mybatis-Plus(0废话,全程高能)
    --------------------------------------------------------------------------------------------------------------------------------我知道你可能或多或少用过,都点进来了,就大概看一眼呗......
  • python 发送buffer类型数据, 发送octet-stream类型数据, 发送Uint8Array类型数据
       #-*-coding:utf-8-*-#@Time:2024/7/3120:20#@Author:Dragonjs_code=r"""commonjsGlobal={};varprotobuf_min={exports:{}};(function(module){!function(g){varr2,e2,i2;r2={1......
  • AI绘画进阶:ComfyUI放大技巧让你接单无忧,AI摄影写真必备
    你知道吗,现在用AI拍照和接写真单子可是个赚钱的好法子。大家都在找那种看起来超真实、艺术感十足的图片。所以,学会一些AI绘画的小技巧,尤其是用ComfyUI这种工具来放大画面的方法,简直是打开了一扇通往财富的大门。今天,我就来跟你聊聊几种超好用的ComfyUI放大技巧,保证让你的作......