elementui中添加开关控制

在这里插入图片描述

<template><!-- 图层管理 --><div class="home-wrapper"><div class="table-list"><div class="list"><el-table :data="tableData" height="100%" style="width: 100%;" border><el-table-column type="expand"><template slot-scope="props"><el-table :data="props.row.tableData" :show-header="false" class="inner-table" style="width: calc(100% - 48px);margin-left: 48px;"><el-table-column prop="itemName" align="center" width="320"></el-table-column><el-table-column prop="itemIndexX" align="center" width="320"></el-table-column><el-table-column prop="itemOpen1" align="center" width="320"><template slot-scope="{row}"><el-switch :value="row.itemOpen1" @change="handleOpen1(row)"></el-switch></template></el-table-column><el-table-column prop="itemOpen2" align="center" width="320"><template slot-scope="{row}"><el-switch :value="row.itemOpen2" @change="handleOpen2(row)"></el-switch></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="{row}"><el-button size="mini" type="text" icon="el-icon-view" @click="handleEdit(row)">编辑</el-button></template></el-table-column></el-table></template></el-table-column><el-table-column label="图层名称" prop="name" align="center" width="320"></el-table-column><el-table-column label="排序" prop="indexX" align="center" width="320"></el-table-column><el-table-column label="图层状态" align="center" width="320"></el-table-column><el-table-column label="是否开放" align="center" width="320"></el-table-column><el-table-column label="操作" align="center"><template slot-scope="{row}"><el-button size="mini" type="text" icon="el-icon-view" @click="handleEdit(row)">编辑</el-button></template></el-table-column></el-table></div><div class="pagination"><el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableParams.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="tableParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination></div></div><!-- 编辑 --><editDialog v-if="editDialog" :dialogShow="editDialog" :form="form" @close="close"></editDialog></div>
</template><script>
import { getRequiresTime, timestampToTime1 } from "@/utils/index";
import editDialog from "./components/editDialog.vue";
export default {components: { editDialog },name: "index",data() {return {tableParams: {pageNum: 1,pageSize: 10,},// 总数totalCount: 0,// 表格数据tableData: [{name: "生态空间",indexX: 1,tableData: [{itemName: "11",itemIndexX: 1,itemOpen1: false,itemOpen2: true,},{itemName: "22",itemIndexX: 2,itemOpen1: false,itemOpen2: true,},{itemName: "33",itemIndexX: 3,itemOpen1: false,itemOpen2: true,},],},],editDialog: false,form: {},};},created() {this.getListData();},mounted() {},methods: {// 获取数据getListData() {},// 查询handleQuery() {this.tableParams.pageNum = 1;this.tableParams.pageSize = 10;this.getListData();},// 图层状态开关handleOpen1(val) {let titleName = "开启";if (val.itemOpen1 == true) {titleName = "开启后该图层将进行展示,是否确认";} else {titleName = "关闭后该图层将不进行展示,是否确认";}this.$confirm(`${titleName}`, "操作确认", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",confirmButtonClass: "confirm-button-sure",cancelButtonClass: "confirm-button-cancel",}).then(() => {console.log("确定", val);val.itemOpen1 = !val.itemOpen1;}).catch(() => {console.log("取消", val);});},// 是否开放开关handleOpen2(val) {let titleName = "开启";if (val.itemOpen2 == true) {titleName = "开启后该图层将公开展示,是否确认";} else {titleName = "关闭后该图层将不公开展示,是否确认";}this.$confirm(`${titleName}`, "操作确认", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",confirmButtonClass: "confirm-button-sure",cancelButtonClass: "confirm-button-cancel",}).then(() => {console.log("确定", val);val.itemOpen2 = !val.itemOpen2;}).catch(() => {console.log("取消", val);});},// 编辑handleEdit(val) {this.form = valthis.editDialog = true;},// 每页几条数据handleSizeChange(val) {this.tableParams.pageSize = val;this.getListData();},// 当前为第几页handleCurrentChange(val) {this.tableParams.pageNum = val;this.getListData();},// 关闭弹窗close(val) {this.editDialog = val;this.getListData();},},
};
</script><style lang="scss" scoped>
.table-list {margin-top: 0;overflow: hidden;.list {overflow: hidden;}
}
::v-deep .el-table__expanded-cell {padding: 0 !important;
}
::v-deep .inner-table {.el-table__cell:last-child {border-right: none !important;// border-bottom: none !important;}.el-table__cell:first-child {border-left: 1px solid #dfe6ec;// border-bottom: none !important;}.el-table__row:last-child .el-table__cell {border-bottom: none !important;}&::before {height: 0px;}
}
</style>

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

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

相关文章

java操作windows系统功能案例(一)

下面是一个Java操作Windows系统功能的简单案例&#xff1a; 获取系统信息&#xff1a; import java.util.Properties;public class SystemInfo {public static void main(String[] args) {Properties properties System.getProperties();properties.list(System.out);} }该程…

组合(回溯算法)

77. 组合 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 样例输入 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],…

第一百八十五回 如何禁止页面跟随手机自动旋转

文章目录 1. 概念介绍2. 使用方法2.1 全面禁止2.2 局部禁止3. 示例代码4. 内容总结我们在上一章回中介绍了"如何自定义Radio组件"相关的内容,本章回中将介绍 如何禁止页面随手机自动旋转.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 在手机默认设置下,手机…

Kubernetes 安全最佳实践:保护您的秘密

Kubernetes 是一个可用于微服务的开源容器编排平台。当我们想要部署容器化应用程序、自动化管理和扩展应用程序时&#xff0c;Kubernetes 非常有用。 在容器中运行单个微服务而不是在同一虚拟机中运行多个进程几乎总是更安全。每当我们在 Kubernetes 中启动任何 pod 时&#x…

Ubuntu 20.04 for NVIDIA V100 GPU安装手册

安装Ubuntu 20.04.3 LTS版本 image.png 安装Ubuntu 20.04按照安装提示&#xff0c;仔细选择每一项&#xff0c;基本默认即可。 系统中查看GPU信息 系统安装完成之后&#xff0c;进入系统&#xff0c;使用lspci 命令查询一下GPU是否存在、型号信息是什么。 bpangbobpang:\~$…

浅谈用户体验测试的主要功能

用户体验(User Experience&#xff0c;简称UX)在现代软件和产品开发中变得愈发重要。为了确保产品能够满足用户期望&#xff0c;提高用户满意度&#xff0c;用户体验测试成为不可或缺的环节。本文将详细探讨用户体验测试的主要功能&#xff0c;以及它在产品开发过程中的重要性。…

Mybatis 的简单运用介绍

Mybatis 用于操作数据库 操作数据库肯定需要: 1.SQL语句 2.数据库对象和 java 对象的映射 接下来我们看看怎么使用 Mybatis 我们先搞一些数据库内容 然后将其这些内容和Java对象进行映射 再创建一个类实现 select * from 再写一个类证明上述代码是否可以实现 别忘了在appli…

会泽一村民上山放羊吸烟引发森林火灾,AI科技急需关注

2023年4月&#xff0c;会泽县古城街道厂沟村委会望香台山林中发生了一场由疏忽引发的森林火灾。张某某在放羊时未完全熄灭烟头&#xff0c;导致7.33公顷的林地和草地被焚毁&#xff0c;直接经济损失高达29.097万元。这一事件再次凸显了日常生活中的安全隐患。 在这一背景下&…

python爬虫基础知识

使用python进行网络爬虫开发之前&#xff0c;我们要对什么是浏览器、什么HTML&#xff0c;HTML构成。请求URL的方法都有一个大概了解才能更清晰的了解如何进行数据爬取。 什么是浏览器&#xff1f; 网页浏览器&#xff0c;简称为浏览器,是一种用于检索并展示万维网信息资源的…

云计算生成式 -给你不一样的音乐推荐新体验

目录 摘要&#xff1a; 正文&#xff1a; 一、亚马逊云与生成式 AI 结合的展望/总结 二、我用亚马逊云科技生成式 AI 产品打造了什么&#xff0c;解决了什么问题 三、未来云端技术发展趋势的见解 四、云端技术未来需要解决的问题 1、如何保护数据安全和隐私&#xff1f; …

EI级 | Matlab实现TCN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测

EI级 | Matlab实现TCN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测 目录 EI级 | Matlab实现TCN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.【EI级】Matlab实现TCN-LSTM-Multihead-Attent…

FIORI /N/UI2/FLP 始终在IE浏览器中打开 无法在缺省浏览器中打开

在使用/N/UI2/FLP 打开fiori 启动面板的时候&#xff0c;总是会在IE浏览器中打开&#xff0c;无法在缺省浏览器打开 并且URL中包含myssocntl 无法正常打开 启动面板 这种情况可以取消激活ICF节点/sap/public/myssocntl