vue2+TS,el-table表格单选的写法
1.打开表格
//父组件引入 <customerChoose ref="customerChooseRef" @onSure="setOrderInfoFn"></customerChoose>//子传父,接收值,操作private async setOrderInfoFn(data) {this.form.customerId = data.idthis.form.customerName = data.customerName}
打开dialog表格:
private async chooseMultiFn(type) {await this.$nextTick();(this.$refs.customerChooseRef as any).opendialog(this.titles,this.form.customerId)}
2.表格的template写法
<template><el-dialog :show-close="false" title="选择客户" :visible.sync="customerDialogVisible" top="0px" width="1000px" center :close-on-click-modal="false" destroy-on-close append-to-body><div style="width: 100%; height: 500px"><el-form :inline="true" :model="customerQueryCondition"><el-form-item label="客户编码:"><el-input v-model="customerQueryCondition.customerCode" clearable placeholder="请输入客户编码"></el-input></el-form-item><el-form-item label="客户名称:"><el-input v-model="customerQueryCondition.customerName" clearable placeholder="请输入客户名称"></el-input></el-form-item><el-form-item><el-button class="seachBtn" @click="searchOrReset(false)"><i class="el-icon-search"></i>{{ $t('i18n.search') }}</el-button><el-button class="seachBtn" @click="searchOrReset(true)"><i class="el-icon-refresh"></i>{{ $t('i18n.reset') }}</el-button></el-form-item></el-form><el-table size="small" header-row-class-name="monitorTable" stripe :data="tableData" height="400px" highlight-current-row border style="width: 100%" ref="myELTable" @row-click="chooseRadio"><el-table-column label="" width="50" align="center"><template scope="scope"><el-radio :label="scope.$index" name="radiobutton" v-model="radio"></el-radio></template></el-table-column><el-table-column prop="customerCode" label="客户编码" align="center"></el-table-column><el-table-column prop="customerName" label="客户名称" align="center"></el-table-column><el-table-column prop="address" label="客户地址" align="center"></el-table-column></el-table></div><el-pagination :background="true" :current-page.sync="pageInfo.current" :page-size="pageInfo.size" layout="total,sizes, prev, pager, next, jumper, slot" :total="pageInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:20px;"><el-button style="margin-left: 5px" type="primary" @click="handleCurrentChange(pageInfo.current)">跳转</el-button></el-pagination><div slot="footer" class="dialog-footer"><el-button @click="onCancelChoose">{{ $t('i18n.cancelBtn') }}</el-button><el-button type="primary" @click="onSureChoose">{{ $t('i18n.sureBtn') }}</el-button></div></el-dialog>
</template>
3 .打开后操作:
打开后的初始化操作:
private titlesOption: string = ''public opendialog(titles,customerId) {// 用户id,用于一开始勾选回显,没有就不勾this.customerId = customerId// 标题this.titlesOption = titles// 客户查询条件 一开始设为空this.customerQueryCondition = {}this.queryCache = {}this.openCustomerChooseDialog()}public async openCustomerChooseDialog() {this.radio = ''//获取表格数据let res = await getCustomerInfo(this.pageInfo.current, this.pageInfo.size, this.queryCache.customerCode || '', this.queryCache.customerName || '', '')this.tableData = res.datathis.pageInfo.total = res.totalDataCount//打开弹窗this.customerDialogVisible = trueif (this.customerId) {this.$nextTick(() => {// 初始化回显勾选this.radio = this.tableData.findIndex((item) => item.id == this.customerId)})}}
表格单选:
//单选下标
private radio: any = ''//存储选中行的数据private currentSelectedRow: any = {}//@row-click="chooseRadio" 选中某一行private async chooseRadio(e) {this.tableData.filter((item, index) => {if (e.id == item.id) this.radio = index})this.currentSelectedRow = e}
4.点击确定后的操作
//用于子传父
@Emit('onSure')private onSure(row: any) {}// 确定private async onSureChoose(e) {//把勾选的值传到父页面操作this.onSure(this.currentSelectedRow)this.customerDialogVisible = false}
相关文章:
vue2+TS,el-table表格单选的写法
1.打开表格 //父组件引入 <customerChoose ref"customerChooseRef" onSure"setOrderInfoFn"></customerChoose>//子传父,接收值,操作private async setOrderInfoFn(data) {this.form.customerId data.idthis.form.cu…...
北邮《计算机网络》蒋老师思考题及答案-传输层
蒋yj老师yyds! 答案自制,仅供参考,欢迎质疑讨论 问题一览 传输层思考题P2P和E2E的区别使用socket的c/s模式通信,流控如何反映到编程模型三次握手解决什么问题举一个两次握手失败的例子为什么链路层是两次握手而非三次?…...
学懂C#编程:常用高级技术【元组的详细使用】——利用元组获取多个返回值
C#常用高级技术——利用元组获取多个返回值 在C# 7.0及更高版本中,您可以使用元组(Tuples)来实现这种返回多个值的方法。您提供的代码片段是正确的,它定义了一个名为Calculate的方法,该方法接受两个整数参数a和b&#…...
解决IDEA使用卡顿的问题,设置JVM内存大小和清理缓存
解决IntelliJ IDEA中卡顿问题,可以尝试以下几个常见且有效的步骤: 1 增加IDEA的JVM内存分配: 位于IDEA安装目录的bin文件夹下,找到对应的操作系统配置文件(idea64.exe.vmoptions(Windows)或id…...
Python爬虫从入门到入狱之爬取知乎用户信息
items中的代码主要是我们要爬取的字段的定义 class UserItem(scrapy.Item):id \ Field()name \ Field()account\_status \ Field()allow\_message\ Field()answer\_count \ Field()articles\_count \ Field()avatar\_hue \ Field()avatar\_url \ Field()avatar\_url\_template…...
apk反编译修改教程系列-----去除apk软件更新方法步骤列举 记录八种最常见的去除方法
在前面几期博文中 有说明去除apk软件更新的步骤方法。我们在对应软件反编译去除更新中要灵活运用。区别对待。同一个软件可以有不同的去除更新方法可以适用。今天的教程对于软件更新去除列举几种经常使用的修改步骤。 通过基础课程可以了解 1-----软件反编译更新去除的几种常…...
SpringMVC系列六: 视图和视图解析器
视图和视图解析器 💞基本介绍💞 自定义视图为什么需要自定义视图自定义试图实例-代码实现自定义视图工作流程小结Debug源码默认视图解析器执行流程多个视图解析器执行流程 💞目标方法直接指定转发或重定向使用实例指定请求转发流程-Debug源码…...
MySQL数据备份的分类
MySQL数据库的备份 在我们使用MySQL数据库的过程中,一些意外情况的发生,有可能造成数据的损失。例如,意外的停电,不小心的操作失误等都可能造成数据的丢失。 所以为了保证数据的安全与一致性,需要定期对数据进行备份。…...
node+nginx实现对react进行一键打包部署--windows版
文章目录 nodenginx实现对react进行一键打包部署--windows版1.功能展示及项目准备1.1功能展示 1.2 项目准备1.2.1技术点1.2.2安装相关配置(windows) 2.实现2.1 实现思路2.2 实现步骤2.1 项目准备2.1.1 创建env文件2.1.2 创建api/index.js文件2.1.3 添加解决跨域代码 2.2 项目实…...
【机器学习】基于Gumbel-Sinkhorn网络的“潜在排列问题”求解
1. 引言 1.1.“潜在排列”问题 本文将深入探索一种特殊的神经网络方法,该方法在处理离散对象时展现出卓越的能力,尤其是针对潜在排列问题的解决方案。在现代机器学习和深度学习的领域中,处理离散数据一直是一个挑战,因为传统的神经网络架构通常是为连续数据设计的。然而,…...
create-react-app创建的项目中设置webpack配置
create-react-app 创建的项目默认使用的是 react-scripts(存在于node_modules文件夹中)来处理开发服务器和构建,它内置了一些webpack相关配置。一般不会暴露出来给开发者,但是在有些情况下我们需要修改下webpack默认配置ÿ…...
【ai】tx2 nx :安装torch、torchvision for yolov5
torchvision 是自己本地构建的验证torchvision nvidia@tx2-nx:~/twork/03_yolov5/torchvision$ nvidia@tx2-nx:~/twork/03_yolov5/torchvision$ python3 Python 3.6.9 (default, Mar 10 2023, 16:46:00) [GCC 8.4.0] on linux Type "help", "copyright",…...
【报错】在终端中输入repo命令后系统未能识别这个命令
1 报错 已经使用curl命令来下载repo工具,但是在终端中输入repo命令后系统未能识别这个命令。 2 分析 通常是因为repo...
【机器学习】K-Means算法详解:从原理到实践
🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 💫个人格言: "如无必要,勿增实体" 文章目录 K-Means算法详解:从原理到实践引言1. 基本原理1.1 簇与距离度量1.2 …...
解决qiankun项目与子应用样式混乱问题
背景 qiankun项目用的是Vue2Antdesign2,但其中一个子应用用的是Vue3Antdesign4。集成之后发现子应用的样式混乱,渲染的是Antdesign2的样式。 解决 以下步骤在子应用里操作 1. 在main.js引入ConfigProvider ,在app全局注册ConfigProvider …...
黑产当前,如何识别异常图片?
在这个人人都是创作者的年代, UGC 已成为诸多平台的重要组成。 有利益的地方就会有黑产存在, 不少 UGC 平台都被黑产「薅羊毛」搞的心烦意乱, 用户传的图片,怎么就变成视频链接了? 正常运营的平台,为何流量…...
数据模型(models)
自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 (1)在App中添加数据模型 在app1的models.py中添加如下代码: from django.db import models # 引入django.…...
【CS.AL】算法核心之贪心算法 —— 力扣(LeetCode)743. 网络延迟时间 - Dijkstra算法题解
文章目录 题目描述References 题目描述 743. 网络延迟时间 - 力扣(LeetCode) 有 N 个网络节点,标记为 1 到 N。 给定一个列表 times,其中 times[i] (u, v, w) 表示有一条从节点 u 到节点 v 的时延为 w 的有向边。 现在…...
25、架构-微服务的驱动力
微服务架构的驱动力可以从多方面探讨,包括灵活性、独立部署、技术异构性、团队效率和系统弹性等。 灵活性和可维护性 灵活性是微服务架构的一个主要优势。通过将单体应用拆分成多个独立的微服务,开发团队可以更容易地管理、维护和更新各个服务。每个微…...
JeecgFlow事件网关概念及案例
事件网关 通常网关基于连线条件决定后续路径,但事件网关有所不同,其基于事件决定后续路径。事件网关的每条外出顺序流都需要连接一个捕获中间事件。 事件网关只有分支行为,流程的走向完全由中间事件决定。可以从多条候选分支中选择事件最先达…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
