网站首页 Vue 正文
这录屏工具让div块背景色都变了，emmm
以下代码只是其中一个div块实现联动的方法，下拉框的数据需要调用接口获取
实现思路：
1. 把需要进行联动的下拉框用v-if实现控制显示隐藏
2. 整体的div块用v-for循环
3. 最重要的数据绑定，实现数据选择不一致
<template>
<div class="table-container-wapper">
<el-collapse v-model="activeNames">
<!-- 触发条件 -->
<!-- 添加触发条件按钮 -->
<template>
<div class="title">
<el-button type="warning" :size="$formSize" @click="addStrike"
>增加条件
<i class="el-icon-circle-plus-outline"></i>
</el-button>
</div>
<el-collapse-item title="触发条件" name="2">
<div class="trigger-condition">
<!-- 满足条件 -->
<div class="count">
<span style="margin-right: 5px">需要满足</span>
<el-select
class="amount"
v-model="nums"
clearable
placeholder="请选择"
>
<el-option
v-for="item in amountList"
:key="item.num"
:label="item.label"
:value="item.num"
>
</el-option>
</el-select>
<span style="margin-left: 5px">以下条件</span>
</div>
<!-- 触发条件表单项 -->
<div
class="block"
v-for="(item, index) in strikeBlock"
:key="index"
>
<div class="form-list">
<el-form ref="form" :model="item">
<div class="total-control">
<el-row class="row" :gutter="20">
<el-col :span="3">
<el-form-item>
<!--触发方式-如何触发-->
<el-select
v-model="item.styles"
placeholder="请选择"
@change="triggerChange(item, index)"
>
<el-option
v-for="item2 in item.triggerList"
:key="item2.style"
:label="item2.label"
:value="item2.style"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2" v-if="item.triggerStyle">
<el-button
type="success"
:size="$formSize"
icon="el-icon-plus"
@click="addDevice('strikeBlock', index)"
>添加设备
</el-button>
</el-col>
<el-col
:span="3"
style="white-space: nowrap"
v-if="item.triggerStyle"
>
<!--触发条件-触发方式-->
<el-form-item label="触发方式:">
<el-select
v-model="item.methoded"
clearable
placeholder="请选择"
@change="methChange(item)"
>
<el-option
v-for="item2 in item.methodList"
:key="item2.methodes"
:label="item2.label"
:value="item2.methodes"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3" v-if="item.handTrigger">
<p>手动操作次场景</p>
</el-col>
</el-row>
</div>
<div class="condition-control">
<!--触发条件-触发方式-属性触发或者事件触发-->
<div v-if="item.property">
<el-row :gutter="20">
<el-col :span="3">
<el-form-item>
<el-select
v-model="item.light"
@change="triggerModeChange(item)"
>
<el-option
v-for="item2 in item.triggerModeList"
:key="item2.name"
:label="item2.name"
:value="item2.identifier"
v-show="showTriggerModeList(item, item2)"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<!--触发条件-属性触发-符号-->
<el-col :span="3">
<el-form-item>
<el-select
v-model="item.symbol"
@change="symbolChange(item)"
>
<el-option
v-for="item2 in item.symbolList"
:key="item2.symbols"
:label="item2.label"
:value="item2.symbols"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<div v-if="item.number">
<el-col :span="3">
<el-form-item>
<el-input v-model="item.numerical"></el-input>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item v-model="item.unit">
<p style="margin-left: -15px; margin-top: 0px">
{{ item.unit }}
</p>
</el-form-item>
</el-col>
</div>
<!--触发条件-属性触发-值-下拉款-->
<div v-if="item.choose">
<el-col :span="3">
<el-form-item>
<el-select v-model="item.numerical">
<el-option
v-for="item2 in item.numberList"
:key="item2.numbers"
:label="item2.label"
:value="item2.numbers"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item v-model="item.unit">
<p style="margin-left: -15px; margin-top: 0px">
{{ item.unit }}
</p>
</el-form-item>
</el-col>
</div>
<div v-if="item.interval">
<el-col :span="3">
<el-input/>
</el-col>
<el-col
:span="1"
style="margin-left: -10px; margin-top: 10px"
>
<span>~</span>
</el-col>
<el-col :span="3">
<el-input/>
</el-col>
<el-col :span="3">
<el-form-item v-model="item.unit">
<p style="margin-left: -15px; margin-top: 0px">
{{ item.unit }}
</p>
</el-form-item>
</el-col>
</div>
</el-row>
</div>
<!--触发条件-事件触发-->
<div v-if="item.event">
<el-row :gutter="20">
<el-col :span="3">
<el-form-item>
<el-select v-model="item.event">
<el-option
v-for="item2 in item.eventList"
:key="item2.events"
:label="item2.label"
:value="item2.events"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<!--触发条件-事件触发-事件选择-->
<div v-if="item.service">
<el-row :gutter="20">
<el-col :span="3">
<el-form-item>
<el-select v-model="item.service">
<el-option
v-for="item2 in item.serviceList"
:key="item2.services"
:label="item2.label"
:value="item2.services"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item>
<el-select v-model="item.serv">
<el-option
v-for="item2 in item.serviceSymbol"
:key="item2.servSymbol"
:label="item2.label"
:value="item2.servSymbol"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item>
<el-select v-model="item.switch">
<el-option
v-for="item2 in item.switchList"
:key="item2.switchStyle"
:label="item2.label"
:value="item2.switchStyle"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</el-form>
</div>
<div class="delete-btn">
<el-button
class="delete"
icon="el-icon-delete"
@click="delStrike(index)"
>删除
原文链接：https://blog.csdn.net/m0_45685758/article/details/122101039
相关推荐
- 2023-01-07 Flutter Dart快速排序算法示例详解_Dart
- 2023-01-01 Golang反射修改变量值的操作代码_Golang
- 2022-12-16 C++ Boost EnableIf函数使用介绍_C 语言
- 2022-12-04 React条件渲染实例讲解使用_React
- 2022-11-07 PostgreSQL游标与索引选择实例详细介绍_PostgreSQL
- 2022-10-13 Python 变量教程之打包和解包参数_python
- 2022-04-08 IIS部署ASP.NET Core项目及常见问题总结_基础应用
- 2022-06-29 python版单链表反转_python
- 最近更新
-
- window11 系统安装 yarn
- 超详细win安装深度学习环境2025年最新版（
- Linux 中运行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存储小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基础操作-- 运算符，流程控制 Flo
- 1. Int 和Integer 的区别，Jav
- spring @retryable不生效的一种
- Spring Security之认证信息的处理
- Spring Security之认证过滤器
- Spring Security概述快速入门
- Spring Security之配置体系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置权
- redisson分布式锁中waittime的设
- maven:解决release错误：Artif
- restTemplate使用总结
- Spring Security之安全异常处理
- MybatisPlus优雅实现加密？
- Spring ioc容器与Bean的生命周期。
- 【探索SpringCloud】服务发现-Nac
- Spring Security之基于HttpR
- Redis 底层数据结构-简单动态字符串（SD
- arthas操作spring被代理目标对象命令
- Spring中的单例模式应用详解
- 聊聊消息队列，发送消息的4种方式
- bootspring第三方资源配置管理
- GIT同步修改后的远程分支
Copyright © 2025 AB教程网
免责声明
本站部分资源收集于互联网、用户投稿，其版权归原作者所有，内容以共享、参考、学习为主，不存在任何商业目的。如有侵权请与本站联系，情况属实将予以删除!
本站部分资源收集于互联网、用户投稿，其版权归原作者所有，内容以共享、参考、学习为主，不存在任何商业目的。如有侵权请与本站联系，情况属实将予以删除!
提供CDN加速