element ui table 每行不同状态
table 每行定义值
tableData: [ { name: '',type:'',location:'', ziduan:'',createtype:'',ziduanvalue:'',checkAll:true,checkedCities: ['空', 'null', 'str随机', 'int随机'],isIndeterminate: 'true',table_id:'single',downloaddisabled:'true',deldisabled:'true'}
],
table column
v-model="scope.row.checkedCities
本来一个入参改成两个入参,需要传入index
@change="(val) => handleCheckAllChange(val,scope.$index)"
设置table某行值
this.tableData[id].ziduanvalue = " "
列某时只显示一个,v-show table内不起作用,用v-if 可以
v-if="tableisDisabled"
<template><div><el-container style="height:100%;"><el-container><el-main ><br><div style="width:40%"><template><el-table :data="tableData" border style="width: 100%"><el-table-column prop="ziduanvalue" label="字段值" width="300" v-if="tableisDisabled"><template slot="header" slot-scope="scope" ><el-tooltip class="item" effect="dark" placement="top"><div slot="content">多个字段值用英文;隔开,字段多个数值用英文逗号,隔开</div><span>字段值<i class="el-icon-info"></i></span></el-tooltip></template><template slot-scope="scope" ><el-input v-model="scope.row.ziduanvalue" placeholder="请输入内容"></el-input></template></el-table-column><el-table-column prop="ziduanvalue" label="字段值" width="300" v-if="tableisDisabled2"><template slot="header" slot-scope="scope" ><el-tooltip class="item" effect="dark" placement="top"><div slot="content">多个字段值用英文;隔开,字段多个数值用英文逗号,隔开</div><span>字段值<i class="el-icon-info"></i></span></el-tooltip></template><template slot-scope="scope" ><el-checkbox :indeterminate="isIndeterminate" v-model="scope.row.checkAll" @change="(val) => handleCheckAllChange(val,scope.$index)">全选</el-checkbox><div style="margin: 15px 0;"></div><el-checkbox-group v-model="scope.row.checkedCities" @change="(value) => handleCheckedCitiesChange(value,scope.$index)"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group></template></el-table-column></el-table></template></el-main></el-container></el-container></div>
</template><script>const cityOptions = ['空', 'null', 'str随机', 'int随机'];import axios from 'axios'const instance = axios.create({timeout: 1000*60*10 // 设置超时时间为10分钟});export default{name:"CreatJmx",data() {return {//dialogcreateVisible:false,//isDisabled:false,downloaddisabled:true,deldisabled:true,tableData: [{ name: '',type:'',location:'', ziduan:'',createtype:'',ziduanvalue:'',checkAll:true,checkedCities: ['空', 'null', 'str随机', 'int随机'],isIndeterminate: 'true',table_id:'single',downloaddisabled:'true',deldisabled:'true'}],form: {filename:'',},fileList: [] ,// 绑定的文件列表tableidall:'all',//checkAll: true,// checkedCities: ['空', 'null', 'str随机', 'int随机'],cities: cityOptions,// isIndeterminate: true,tableisDisabled:true,tableisDisabled2:false}},components:{},mounted:function(){// mounted关闭},methods: {handleCheckAllChange(val,id) {console.log(val,id)this.tableData[id].checkedCities = val ? cityOptions : [];this.tableData[id].isIndeterminate = false;this.tableData[id].ziduanvalue = this.tableData[id].checkedCities.join(',')console.log(this.tableData[id].checkedCities.join(','))},handleCheckedCitiesChange(value,id) {console.log(value,id)let checkedCount = value.length;this.tableData[id].checkAll = checkedCount === this.cities.length;this.tableData[id].isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;this.tableData[id].ziduanvalue = this.tableData[id].checkedCities.join(',')console.log(this.tableData[id].checkedCities.join(','))},selectchange(value,id) {console.log('生成类型',value)if(value === "yichang"){console.log('异常')console.log(this.tableData[id].checkedCities.join(','))this.tableData[id].ziduanvalue = this.tableData[id].checkedCities.join(',')//this.tableData[id].isDisabled = true//console.log(this.tableData[id].isDisabled)this.tableisDisabled2 = truethis.tableisDisabled = falseconsole.log(this.tableisDisabled,this.tableisDisabled2)}else{this.tableData[id].ziduanvalue = " "//this.tableData[id].isDisabled = false//console.log(this.tableData[id].isDisabled)this.tableisDisabled = truethis.tableisDisabled2 = falseconsole.log(this.tableisDisabled,this.tableisDisabled2)}}//methods结束}}
</script>
相关文章:
element ui table 每行不同状态
table 每行定义值 tableData: [ { name: ,type:,location:, ziduan:,createtype:,ziduanvalue:,checkAll:true,checkedCities: [空, null, str随机, int随机],isIndeterminate: true,table_id:single,downloaddisabled:true,deldisabled:true} ], table c…...
力扣--LRC 142.训练计划IV
题目 给定两个以 有序链表 形式记录的训练计划 l1、l2,分别记录了两套核心肌群训练项目编号,请合并这两个训练计划,按训练项目编号 升序 记录于链表并返回。 注意:新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&am…...
windows下,用CMake编译qt项目,出现错误By not providing “FindQt5.cmake“...
开发环境:windows10 qt5.14, 编译器msvc2017x64,CMake3.30; 现象: CMakeList文件里,如有find_package(Qt5 COMPONENTS Widgets REQUIRED) target_link_libraries(dis_lib PRIVATE Qt5::Widgets) 用CMak…...
【element-tiptap】Tiptap编辑器核心概念----结构篇
core-concepts 前言:这篇文章来介绍一下 Tiptap 编辑器的一些核心概念 (一)结构 1、 Schemas 定义文档组成方式。一个文档就是标题、段落以及其他的节点组成的一棵树。 每一个 ProseMirror 的文档都有一个与之相关联的 schema,…...
半导体工艺与制造篇3 离子注入
离子注入工艺 一般掺杂的杂质类别,包括:提供载流子的施主杂质和受主杂质;产生复合中心的重金属杂质 离子注入往往需要生成井well,其中井的定义:晶圆与杂质之间形成的扩散层或杂质与杂质之间形成的扩散层 离子注入的目的:用掺杂改…...
利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构
FcDesigner 是一个强大的开源低代码表单设计器组件,支持快速拖拽生成表单。提供丰富的自定义及扩展功能,FcDesigner支持多语言环境,并允许开发者进行二次开发。通过将表单设计输出为JSON格式,再通过渲染器进行加载,实现…...
淘宝 NPM 镜像源
npm i vant/weapp -S --production npm config set registry https://registry.npmmirror.com 要在淘宝 NPM 镜像站下载项目或依赖,你可以按照以下步骤操作: 1. 设置淘宝 NPM 镜像源 首先,你需要设置淘宝 NPM 镜像源以加速下载。可以通过…...
i春秋-GetFlag(md5加密,字符串比较绕过)
练习平台地址 竞赛中心 题目描述 题目内容 你好,单身狗,这是一个迷你文件管理器,你可以登录和下载文件,甚至得到旗帜 点击登录 发现capture需要满足条件substr(md5(captcha), 0, 6)xxxxxx 编写python脚本破解验证码 import has…...
SpringBoot中设置超时30分钟自动删除元素的List和Map
简介 在 Spring Boot 中,你可以使用多种方法来实现自动删除超时元素的 List 或 Map。以下是两种常见的方式: 如果你需要简单的功能并且不介意引入外部依赖,可以选择 Guava Cache。如果你想要更灵活的控制,使用 Spring 的调度功能…...
入门车载以太网(6) -- XCP on Ethernet
目录 1.寻址方式 2.数据帧格式 3.特殊指令 4.使用实例 了解了SOME/IP之后,继续来看看车载以太网在汽车标定领域的应用。 在汽车标定领域XCP是非常重要的协议,咱们先来回顾下基础概念。 XCP全称Universal Measurement and Calibration Protocol&a…...
DAY4 网络编程(广播和多线程并发)
作业1: 1、将广播发送和接收端实现一遍,完成一个发送端发送信息,对应多个接收端接收信息实验。 send.c代码: #include <myhead.h> #define IP "192.168.61.255"//广播IP #define PORT 7777 int main(int argc, …...
C++个人复习(4)
C中为什么要引入make_shared,它有什么优点 1. 减少内存分配次数 使用 make_shared 时,内存分配只发生一次,它同时分配了对象和控制块(用于管理引用计数等信息)。而如果直接使用 new 创建对象并传递给 shared_ptr,则会…...
Dockerhub镜像加速
一、背景 dockerhub由于被封锁和站点处于国外的原因,docker pull拉取镜像非常慢,有时候直接都无法拉取。严重妨碍了我们的学习进度以及日常使用。 总结了一些proxy代理的镜像站点,配置之后速度会有明显提升,大家可以参考使用。 二…...
11.20讲座笔记
信息门户 -------- 人才培养方案(重要) 结构化矛盾------需求方(企业) ------供给方(高校) 电子方向职业 -------- 基建、基础算力 -------中国 1st (已经相对完善饱和) 网…...
网络协议之UDP
一、UDP协议定义 UDP(User Datagram Protocol,用户数据报协议)是一种面向无连接的、不可靠的、基于数据报的传输层通信协议。UDP在传输数据时不需要建立连接,直接将数据包发送出去。这种特性使得UDP在实时性要求较高的应用场景中…...
Elasticsearch面试内容整理-常见问题和解决方案
在使用 Elasticsearch 的过程中,可能会遇到各种常见问题,如集群状态异常、分片未分配、查询性能低下等。这些问题往往影响系统的可用性和性能,因此理解这些问题的成因和解决方案非常重要。以下是 Elasticsearch 常见问题及其解决方案的整理。 集群状态问题 Elasticsearch 集…...
React 表单Form 中的 useForm
1、介绍 useForm 是 React Hook Form 中的核心 Hook,用于管理表单的状态和行为。它提供了处理表单验证、数据收集、状态管理等功能的简便方法。useForm 本质上是用于创建和配置表单,并允许你在组件中与表单字段交互。 2、基本用法 useForm 是一个函数…...
用指针函数寻找数组中的最大值与次大值
#include <stdio.h>// 函数用于找出数组中的最大值和次大值 void LargestTow(int a[], int n, int *pfirst, int *psecond) {*pfirst a[0];*psecond a[1];if (*psecond > *pfirst) {// 如果初始的次大值大于最大值,交换它们int temp *pfirst;*pfirst *…...
人工智能在金融领域的创新与应用
引言:AI如何重塑金融行业? 金融行业是人工智能(AI)技术的最佳应用场景之一。通过数据分析、模式识别和自动化处理,AI正为金融行业提供高效、安全和智能化的解决方案。从反欺诈到投资决策,AI正逐步改变金融服…...
shell脚本(4)一文解决比较运算符用户交互
免责声明 学习视频来自B 站up主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下代码、网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 比较运算符 在Shell脚本中…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露,数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据,严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能,但SEMR…...
