对支持全选的el-table进行筛选并且与另一个table进行数据关联

效果图

​​

代码

弹窗代码

<!-- 弹窗组件 -->
          <el-dialog title="选择设备" :visible.sync="dialogVisible" width="50%">
            <div class="table-container">
              <div style="display: flex; gap: 20px; overflow: auto">
                <small style="width: 10%; margin-top: 17px; margin-left: 20px">
                  设备名称:</small
                >
                <el-input
                  v-model="query.searchQuery"
                  placeholder="搜索设备"
                  style="margin-bottom: 20px; margin-top: 10px; width: 30%"
                /><span style="margin-top: 20px"
                  >已选择{{ this.query.selectedData.length }}台设备</span
                >
              </div>

              <div
                style="display: flex; gap: 20px; height: 300px; overflow: auto"
              >
                <!-- 第一个表格，显示所有数据 -->
                <el-table
                  ref="myTable"
                  :data="filteredData"
                  @select-all="handleSelectAll"
                  @selection-change="handleSelectionChange"
                  style="width: 50%; margin-left: 50px"
                >
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column
                    prop="deviceName"
                    label="设备名称"
                    width="150"
                  >
                  </el-table-column>
                </el-table>

                <!-- 第二个表格，显示选中的数据 -->
                <el-table
                  :data="query.selectedData"
                  style="width: 50%; margin-left: 50px"
                >
                  <el-table-column
                    prop="deviceName"
                    label="设备名称"
                    width="150"
                  >
                  </el-table-column>
                  <el-table-column label="操作" min-width="50" >
                    <template slot-scope="{ row }">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        @click="removeDevice(row.deviceId)"
                        circle
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="confirmSelection"
                >确定</el-button
              >
            </div>
          </el-dialog>

js代码

data() {
    return {
      dialogVisible: false,
      msg: "未选择设备，默认查询全部设备",
      query:{
              ids: [],
              count: 10,
              startTempTime: "",
              searchQuery: "",
              selectedData: [],      
              }
           }
      },
  computed: {
    filteredData() {
      return this.list.filter((item) =>item.deviceName.includes(this.query.searchQuery)
      );
    },
  },
  methods: {
      handleSelectAll(selection) {
      if (selection.length == 0 && this.query.searchQuery == "") {
        //  this.query.selectedData=[]
        this.query.selectedData = [];
        return;
      }
      console.log("全选操作，当前选中的所有行:", selection);
    },
    // 监听第一个表格的选择事件
    handleSelectionChange(selection) {
      if (selection.length == 0 && this.query.searchQuery == "") {
        if (this.query.selectedData.length == 1) {
          this.query.selectedData = [];
        }
        this.restoreSelection();
        return;
      }
      if (
        selection.length == 0 &&
        this.query.searchQuery != "" &&
        this.query.selectedData.length > 0
      ) {
        this.restoreSelection();
        return;
      }
      
      // 获取 filteredData 中不在 selection 中的元素
      const difference1 = this.filteredData.filter(
        (x) => !selection.includes(x)
      );
      const set = new Set(this.query.selectedData);
      // this.query.selectedData = selection;
      var ids = [];
      selection.forEach((element) => {
        ids.push(element.deviceId);
        set.add(element);
      });

      var newList = Array.from(set);
      this.query.selectedData = newList.filter((x) => !difference1.includes(x));
      this.restoreSelection();
      this.query.ids = ids;
    },
    // 确认选择
    confirmSelection() {
      if (this.query.selectedData.length != 0) {
        this.msg = "已选择" + this.query.selectedData.length + "台设备";
      }
      this.dialogVisible = false;
    },
     removeDevice(deviceId) {
      this.query.selectedData = this.query.selectedData.filter(
        (row) => row.deviceId !== deviceId
      );
      const row = this.filteredData.find((row) => row.deviceId === deviceId);
      if (row) {
        this.$refs.myTable.toggleRowSelection(row, false); // 取消选中
      }
    },
    restoreSelection() {
      this.$nextTick(() => {
        this.query.selectedData.forEach((row) => {
          this.$refs.myTable.toggleRowSelection(row, true);
        });
      });
    },            
}

（小小的说明一下，我不是专门搞前端的，前端水平有限，就是需要实现这个功能，但是没找到满足需求的，就只能自己写啦，可能写的一坨哈哈哈哈，但是还是满足需求了，需要的话可以参考一下下哈哈哈哈）