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

<template>
  <div class="glczp">
    <div class="search-style">
      <el-input
        placeholder="请输入关键字"
        v-model="searchVal"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="searchBtn"
      >搜索</el-button>
    </div>
    <div class="table-content">
      <div class="tab1">
        <vxe-grid
          ref="x-table1"
          border
          round
          stripe
          align="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-grid
          ref="x-table2"
          auto-resize
          header-align="center"
          border
          height="auto"
          show-overflow
          :columns="tableHeader2"
          :data="tableData2"
        >
        </vxe-grid>
      </div>
    </div>
    <div class="menu-btn">
      <el-button
        type="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-button
                  size="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>