el-table那些事

el-table那些事

      • 1、获取el-table所有勾选的行数据
      • 2、el-table自定义列标题
      • 3、el-table列可编辑,加入el-input等

用于记录工作和日常学习遇到的坑,需求。
vue3+element-plus+ts

1、获取el-table所有勾选的行数据

在这里插入图片描述在这里插入图片描述在这里插入图片描述1、需要先声明一个ref变量,并赋值给el-table
2、通过el-table提供的getSelectionRows()函数获取选中的"行对象"数据集

    const tableRef = ref();const selectedAry = tableRef.value.getSelectionRows();console.log(selectedAry);

2、el-table自定义列标题

在这里插入图片描述在这里插入图片描述

				<el-table :data="expandAttribute" style="width: 100%"><el-table-column prop="name" label="属性分类" /><el-table-column prop="state" label="属性名称" /><el-table-column prop="city" label="属性编码" /><el-table-column prop="address" label="属性值" /><el-table-column><template #header><span>操作</span><el-icon><CirclePlus /></el-icon></template></el-table-column></el-table>

3、el-table列可编辑,加入el-input等

在这里插入图片描述

<el-table :data="form.cargoList" :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle" height="300"><el-table-column type="index" label="序号" width="60" /><el-table-column prop="spuId" show-overflow-tooltip v-if="false" /><el-table-column label="物料名称"><template v-slot="scope"><el-tree-selectv-model="scope.row.skuId":data="spuLinkTree":render-after-expand="false"placeholder="请选择物料"@change="selectSku(scope.row)"/></template></el-table-column><el-table-column label="货物数量"><template v-slot="scope"><el-input v-model="scope.row.soQty" placeholder="请输入货物数量" /></template></el-table-column><el-table-column label="操作" width="150"><template #default="scope"><el-button icon="delete" text type="primary" @click="handleDelete([scope.row.$index])">删除</el-button></template></el-table-column></el-table>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/62311.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

01 - 工作区、暂存区、版本库、远程仓库 - 以一次连贯的提交操作为例

1. 工作区、暂存区、版本库、远程仓库 以一次连贯的提交操作为例。 1.1 工作区 Git的工作区也就是我们平时编辑代码的目录文件夹。 新建一个kongfu_person.txt文件&#xff0c;工作区的变化&#xff1a; 1.2 工作区 > 暂存区&#xff1a;git add 1.3 暂存区 > 版本库…

LNMP应用

目前成熟的企业网站应用模式之一&#xff0c;指的是一套协调工作的系统和相关软件 能够提供静态页面的服务&#xff0c;也可以提供动态Web服务 LNMP LNMP介绍 L &#xff1a;Linux系统 &#xff0c;操作系统 N&#xff1a;Ngin提供网站服务&#xff0c;前端&#xff0c;提…

leetcode经典算法——快速幂

实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即&#xff0c;xn &#xff09;。 暴力方法肯定是循环循环n次&#xff0c; 每一次*x 显然此方法遇到大的数字会超时 那么我们要引进一个思想&#xff0c;快速幂算法 例如&#xff1a; x^97 我们可以看出&a…

小程序的api使用 以及一些weui组件实列获取头像 扫码等

今日目标 响应式单位rpx小程序的生命周期 【重点】20%小程序框架 weui 【重点】 50%内置API 【重点】30%综合练习 1. 响应式rpx 1.1 rpx单位 rpx是微信小程序提出的一个尺寸单位&#xff0c;将整个手机屏幕宽度分为750份&#xff0c;1rpx 就是 1/750&#xff0c;避免不同手…

vmwera中安装的centos8出现ifconfig不可用

刚刚在虚拟机中装好centos结果发现自己的ifconfig命令不可用。 看一下环境变量里有没有ifconfig命令的路径&#xff0c;因为ifconfig是在/sbin路径下的&#xff0c;root用户登录进去才可以运行&#xff0c;先看一下root用户的环境变量。 root用户的环境变量里是有/sbin路径的&a…

CI/CD—K8S 基本理解与部署

1 K8S 是什么 Kubernetes 是一款容器的编排调度工具&#xff0c;来源于 Google 开源的 Brog 系统。Kubernetes简称K8S&#xff0c;是用8代替8个字符 “ubernete” 而成的缩写&#xff0c;用于管理云平台中多个主机上的容器化的应用&#xff0c;Kubernetes 的目标是让部署容器化…

springboot工程集成前端编译包,用于uni-app webView工程,解决其需独立部署带来的麻烦,场景如页面->画布->图片->pdf

前端工程 访问方式 http://127.0.0.1:8080/context/frontEnd/index放行 public class SecurityConfig extends WebSecurityConfigurerAdapter { "/frontEnd/**",SysFrontEndController import lombok.extern.slf4j.Slf4j; import nl.basjes.shaded.org.springfram…

超导热催生meme,换汤不换药的投机轮回

文/章鱼哥 出品/陀螺财经 币圈对炒作meme概念的热情从未消亡过。 随着一种名为LK-99的物质被发现&#xff0c;围绕超导的兴奋不仅激发了科学界&#xff0c;加密货币相关概念也与之沸腾。不出所料&#xff0c;与此前围绕元宇宙、AI大肆炒作一样&#xff0c;许多meme代币已经出现…

实时通信应用的开发:Vue.js、Spring Boot 和 WebSocket 整合实践

目录 1. 什么是webSocket 2. webSocket可以用来做什么? 3. webSocket协议 4. 服务器端 5. 客户端 6. 测试通讯 1. 什么是webSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务…

C语言假期作业 DAY 13

一、选择题 1、如果 x2014 &#xff0c;下面函数的返回值是&#xff08; &#xff09; int fun(unsigned int x) { int n 0; while(x 1) { n; x x | (x 1); } return n; } A: 20 B: 21 C: 23 D 25 答案解析 正确答案&#xff1a;C 这个作用是对整型中0的个数进行统计&…

android ndk clang交叉编译ffmpeg动态库踩坑

1.ffmpeg默认使用gcc编译&#xff0c;在android上无法使用&#xff0c;否则各种报错&#xff0c;所以要用ndk的clang编译 2.下载ffmpeg源码 修改configure文件&#xff0c;增加命令 cross_prefix_clang 修改以下命令 cc_default"${cross_prefix}${cc_default}" cxx…

CAP理论与MongoDB一致性,可用性的一些思考

正文 大约在五六年前&#xff0c;第一次接触到了当时已经是hot topic的NoSql。不过那个时候学的用的都是mysql&#xff0c;Nosql对于我而言还是新事物&#xff0c;并没有真正使用&#xff0c;只是不明觉厉。但是印象深刻的是这么一张图片&#xff08;后来google到图片来自这里&…