当前位置: 首页 > news >正文

解决:element ui表格表头自定义输入框单元格el-input不能输入问题

在这里插入图片描述
表格表头如图所示,有 40-45,45-50 数据,且以输入框形式呈现,现想修改其数据或点击右侧加号增加新数据编辑。结果不能输入,部分代码如下

<template v-if="columnData.length > 0"><el-table-column v-for="(item,index) in columnData" :prop="item.prop" :width="item.width"><template slot="header"><el-input size="mini" :disabled="pageType == 'view'" v-model="item.label"></el-input><i class="el-icon-remove-outline" @click="deleteSizeColumns(item.prop)" style="font-size: 16px;"></i></template><template slot-scope="scope"><span v-if="scope.row[item.prop] !== null"><el-input size="mini" :disabled="pageType == 'view'" v-model="scope.row[item.prop]"></el-input></span></template></el-table-column><el-table-column></template>

我看在这一块template中不需要用到 scope 去获取数据,于是没有加上 slot-scope="scope"

	<template slot="header"><el-input size="mini" :disabled="pageType == 'view'" v-model="item.label"></el-input><i class="el-icon-remove-outline" @click="deleteSizeColumns(item.prop)" style="font-size: 16px;"></i></template>

结果不能输入,解决方法就是在表头自定义时将漏掉的slot-scope="scope"加回去

	<template slot="header" slot-scope="scope"><el-input size="mini" :disabled="pageType == 'view'" v-model="item.label"></el-input><i class="el-icon-remove-outline" @click="deleteSizeColumns(item.prop)" style="font-size: 16px;"></i></template>

附:
Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据

相关文章:

解决:element ui表格表头自定义输入框单元格el-input不能输入问题

表格表头如图所示&#xff0c;有 40-45&#xff0c;45-50 数据&#xff0c;且以输入框形式呈现&#xff0c;现想修改其数据或点击右侧加号增加新数据编辑。结果不能输入&#xff0c;部分代码如下 <template v-if"columnData.length > 0"><el-table-colu…...

Android 透明度设置

目录 一、透明度对照表 二、透明度介绍 三、透明度设置 3.1 xml设置 3.2 代码设置 一、透明度对照表 注&#xff1a;00是完全透明&#xff0c;FF就是完全不透明 我们的UI小姐姐就喜欢给「不透明度」&#xff0c;这个需要自己判断一下。 完全透明:0% HEX: 00 透明度:1%…...

python语言的由来与发展历程

Python语言的由来可以追溯到1989年&#xff0c;由Guido van Rossum&#xff08;吉多范罗苏姆&#xff09;创造。在他的业余时间里&#xff0c;Guido van Rossum为了打发时间&#xff0c;决定创造一种新的编程语言。他受到了ABC语言的启发&#xff0c;ABC语言是一种过程式编程语…...

electronjs入门-编辑器应用程序

我们将在Electron中创建一个新项目&#xff0c;如我们在第1章中所示&#xff0c;名为“编辑器”&#xff0c;我们将在下一章中使用它来创建编辑器&#xff1b;在index.js中&#xff0c;这是我们的主要过程&#xff1b;请记住为Electron软件包放置必要的依赖项&#xff1a; npm…...

Xilinx Kintex7中端FPGA解码MIPI视频,基于MIPI CSI-2 RX Subsystem架构实现,提供工程源码和技术支持

目录 1、前言免责声明 2、我这里已有的 MIPI 编解码方案3、本 MIPI CSI2 模块性能及其优缺点4、详细设计方案设计原理框图OV5640及其配置权电阻硬件方案MIPI CSI-2 RX SubsystemSensor Demosaic图像格式转换Gammer LUT伽马校正VDMA图像缓存AXI4-Stream toVideo OutHDMI输出 5、…...

SIMCSE求相似度分数

import torch from transformers import AutoTokenizer, AutoModelForMaskedLM from sklearn.metrics.pairwise import cosine_similarity# simcse相似度分数 def simcse_similar(model, tokenizer, text_a, text_b):inputs_source tokenizer(text_a, return_tensors"pt&…...

java入门,从CK到一部分数据到mysql

一、需求 需要从生产环境ck数据库导数据到mysql&#xff0c;数据量大约100w条记录。 二、处理步骤 1、这里的关键词是生产库&#xff0c;第二就是100w条记录。所以处理数据的时候就要遵守一定的规范。首先将原数据库表进行备份&#xff0c;或者将需要导出的数据建一张新的表了…...

LeetCode(13)除自身以外数组的乘积【数组/字符串】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 238. 除自身以外数组的乘积 1.题目 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素…...

WPF资源,静态资源,动态资源

WPF资源介绍 在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;资源是一种可以在多个地方重复使用的对象。资源可以是任何类型的对象&#xff0c;比如字符串、颜色、画刷、形状、动画、数据模板、样式等。通过将这些对象定义为资源&#xff0c;你可…...

绘图软件 OmniGraffle mac中文版特点说明

OmniGraffle mac是一款图形绘制和图表设计软件&#xff0c;主要面向 macOS 和 iOS 平台。它适用于用户创建流程图、组织结构图、原型设计、网站线框图、地图等各种类型的图形。该软件的界面直观&#xff0c;用户友好&#xff0c;让用户能够轻松地创建和编辑复杂的图形。 OmniGr…...

ai批量剪辑矩阵无人直播一站式托管系统源头技术开发

一、剪辑技术开发 智能剪辑&#xff1a;咱们研发公司自主研发的&#xff0c;包括算法&#xff0c;算法是阶乘算法&#xff0c;无限产出&#xff0c;六大剪辑模式已经满足当下需求了&#xff0c;当然剪辑出的视频可以一键发布&#xff0c;也可以内部批量发布&#xff0c;都可以的…...

CCNA课程实验-14-Final_Lab

目录 实验条件网络拓朴需求 配置实现1. 配置PC1~3, DHCP_Server的vlan2. VLAN10、20的网关为MSW1对应的SVI&#xff0c;VLAN30、40的网关为MSW2对应的SVI&#xff1b;3. 配置5台交换机之间线路均为Trunk4. 配置5台交换机均启用Rapid-PVST(RSTP)5. 配置DHCP Server&#xff0c;创…...

Latex在图表标题里面引用参考文献时,出现参考文献顺序混乱的解决方案(适用于bibtex)

问题描述 如果你在figure环境的\caption或\captionof中使用\cite&#xff0c;但是参考文献的顺序仍然不正确&#xff0c;可能是因为LaTeX的处理流程导致了这个问题。 比如图片在第二章节但里面引用了参考文献&#xff0c;在文章末尾的参考文献第二章图片的参考文献顺序&#…...

多进程间通信学习之消息队列共享内存信号灯集

消息队列&#xff1a;1、基于内核实现&#xff0c;必须在内核空间创建消息队列&#xff1b;2、消息队列中的消息由类型和正文组成&#xff1b;3、消息队列的默认大小为16KB&#xff1b;运行过程&#xff1a;1、进程1将消息写入到消息队列&#xff0c;进程2根据消息的类型从消息…...

机器学习基础之《回归与聚类算法(6)—模型保存与加载》

一、背景 现在我们预测每次都要重新运行一遍模型。完整的流程应该是不断调整阈值重复计算。 当训练或者计算好一个模型之后&#xff0c;那么如果别人需要我们提供结果预测&#xff0c;就需要保存模型&#xff08;主要是保存算法的参数&#xff09;。 二、sklearn模型的保存和…...

修改Openwrt软路由的web端口

如何修改openwrt路由器的web访问端口号&#xff1f; 在OpenWrt路由器上&#xff0c;如何修改Web访问端口号&#xff0c;通常涉及到修改HTTP服务器的配置文件。默认情况下&#xff0c;OpenWrt使用的HTTP服务器是uHTTPd。 以下是修改Web访问端口号的步骤&#xff1a; 一、通过…...

编程怎么学习视频教程,编程实例入门教程,中文编程开发语言工具下载

编程怎么学习视频教程&#xff0c;编程实例入门教程&#xff0c;中文编程开发语言工具下载。 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件…...

得帆信息携手深信服,联合打造高安全PaaS超融合一体化解决方案

上海得帆信息技术有限公司&#xff08;以下简称“得帆”&#xff09;和深信服科技股份有限公司&#xff08;以下简称“深信服”&#xff09;携手推出融合安全性、稳定性、高效性于一体的全新PaaS超融合解决方案。 用户痛点分析 全面推进企业数字化与信息化的趋势下&#xff0c;…...

arcgis--浮点型栅格数据转整型

利用【Spatial Analyst工具】-【数学】-【转为整型】工具&#xff0c;将浮点型数据转为整型。如下&#xff1a; 【转为整型】对话框参数设计如下&#xff1a; 转换结果如下&#xff1a;...

nginx四层tcp负载均衡及主备、四层udp负载均衡及主备、7层http负载均衡及主备配置(wndows系统主备、负载均衡)

准备工作 服务器上安装、配置网络负载平衡管理器 windows服务器热备、负载均衡配置-CSDN博客 在windows服务器上安装vmware17 win10 上安装vmware17-CSDN博客 在windows上利用vmware17 搭建centos7 mini版 在windows上利用vmware17 搭建centos7 mini版本服务器-CSDN博客 …...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...