搜索选中取消功能（两个表格互相关联）

<template><div class="glczp"><div class="search-style"><el-inputplaceholder="请输入关键字"v-model="searchVal"clearable></el-input><el-buttontype="primary"icon="el-icon-search"@click="searchBtn">搜索</el-button></div><div class="table-content"><div class="tab1"><vxe-gridref="x-table1"borderroundstripealign="center"header-align="center"height="auto"row-id="id":row-config="{ isHover: true }":checkbox-config="{highlight: true}":scroll-y="{ gt: 500 }":data="tableData1":columns="tableHeader1"@checkbox-change="checkboxChange":loading="loading"></vxe-grid></div><div class="tab2"><div>已选中的数据：</div><vxe-gridref="x-table2"auto-resizeheader-align="center"borderheight="auto"show-overflow:columns="tableHeader2":data="tableData2"></vxe-grid></div></div><div class="menu-btn"><el-buttontype="primary"@click="save">保存</el-button><el-button @click="$emit('close')">取消</el-button></div></div>
</template><script>
import { query } from "@api/modal";
export default {name: "glczp",props: {defaultSelecte: Array,},data() {return {tableHeader1: [{ type: "checkbox", width: 60, title: " ", align: "center" },{ field: "czpBh", title: "编号", width: 200, class: "czpBh" },{ field: "czmd", title: "目的" },],tableHeader2: [{ field: "czpBh", title: "编号", width: 200, class: "czpBh" },{ field: "czmd", title: "目的" },{field: "",title: "#",width: 100,slots: {default: ({ row }) => {return [<el-buttonsize="mini"type="danger"onClick={() => this.deleteBtn(row)}>删除</el-button>,];},},},],tableData1: [],tableData2: [],loading: false,searchVal: "",};},created() {this.queryList();},mounted() {},methods: {queryList() {this.loading = true;this.tableData1 = [];query({ md: "" }).then((res) => {this.tableData1 = res;this.loading = false;}).then(() => {console.log(this.defaultSelecte,888);// 回显选中this.tableData2 = this.tableData1.filter((item) =>this.defaultSelecte.some((ele) => ele === item.id));this.$refs["x-table1"].setCheckboxRow(this.tableData2, true);});},//搜索按钮searchBtn() {this.loading = true;query({ md: this.searchVal }).then((res) => {this.loading = false;this.tableData1 = res;// 判断tab2中是否存在在tab1中，有默认选中？let arr = this.tableData1.filter((item) =>this.tableData2.some((ele) => ele.czpBh === item.czpBh));console.log(arr, "arr");this.$refs["x-table1"].setCheckboxRow(arr, true);});},//选中时的操作checkboxChange({ row }) {// 选中时判断tab2是否已存在，存在取消选中删除，不存在push新增if (this.tableData2.some((ele) => ele.czpBh === row.czpBh)) {this.tableData2 = this.tableData2.filter((item) => item.czpBh !== row.czpBh);} else {this.tableData2.push(row);}},deleteBtn(row) {this.tableData2 = this.tableData2.filter((item) => item.czpBh !== row.czpBh);//判断删除的数据，是否在当前tab1中，是取消勾选状态？let arr = this.tableData1.filter((item) => item.czpBh == row.czpBh);this.$refs["x-table1"].setCheckboxRow(arr, false);},save() {this.$emit("confirmSuccess", this.tableData2);this.$emit("close");},},
};
</script><style lang="scss" scoped>
.glczp {height: 100%;position: relative;overflow-y: hidden;.search-style {display: flex;padding: 12px;::v-deep .el-input {width: 260px;padding-right: 8px;}}.table-content {height: calc(100% - 125px);display: flex;.tab1 {flex: 1;}.tab2 {width: 40%;}}.menu-btn {width: 100%;height: 60px;line-height: 60px;text-align: center;background: #ebf1fc;position: absolute;bottom: 0;}
}
</style>

搜索选中取消功能（两个表格互相关联）相关推荐

React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
fastadmin如何隐藏表格右上角的搜索，导出等功能按钮，如何实现多选变单选，如何实现点击表格行选中，如何实现双击表格行编辑
一.隐藏隐藏部分:如下图红色部分位置:public/assets/js/backend/pim/test.js 在初始化表格中写入代码如下 commonSearch: false,//快速搜索 v ...
让 WPF 的 RadioButton 支持再次点击取消选中的功能
让 WPF 的 RadioButton 支持再次点击取消选中的功能目录让 WPF 的 RadioButton 支持再次点击取消选中的功能零.前言一.方法一:后台直接处理二.方法二:提取为自定 ...
elementUI的表格搜索和删除功能的实现
elementUI的表格搜索和删除功能的实现 1.搜索可以模糊搜索关键字 2.删除可以删除表格这条数据 3.搜索后可以删除表格数据并清空搜索时展示删除后的数据具体效果可以复制如下代码查看效果: &l ...
Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
wps高亮怎么取消_一组WPS表格小技巧，简单实用
小伙伴们好啊,今天咱们继续来分享几个实用的WPS表格小技巧. 1.筛选合并单元格筛选合并单元格,操作简单没的说. 这个功能很适合一些不规范表格的处理,确实方便. 2.工作表批量取消隐藏取消隐藏工作 ...
不用函数，教你快速查找两张表格中的重复内容。
hello,小伙伴们想必,屏幕前的你,又是因为excel表格所困,今天呢教大家,如何快速在两张大表格里查找重复内容,今天的素材呢为了方便大家查看和理解使用方法,小编简单为大家制作了一个表格,(仅供参 ...
怎样在表格中选出同一类_两个表格中重复的
[www.520z-2.com - 话题作文] 篇一:<两个电子表格里如何找相同的名字补充> 两个电子表格里如何找相同的名字补充:有表格1和表格2,表格1的C列是名字,表格2的B列是名 ...
Excel：如何用vlookup函数进行两个表格数据的对比。
Excel作为职场的重要办公软件,强大的功能给我们提供了很多便利的地方.那么Excel 如何用vlookup函数进行两个表格数据的对比呢,如何从一堆数据中匹配出自己需要的值呢. 工具/原料 Excel ...

搜索选中取消功能（两个表格互相关联）

搜索选中取消功能（两个表格互相关联）相关推荐

最新文章

热门文章