el-table 新增和编辑时 有一个设备表格,选中弹框中一个设备添加到另一个表格中, 分页切换时，使选中的操作不消失，再次选择这个设备表格,使之前选中的设备禁用不能选中，

Question

el-table 新增和编辑时 有一个设备表格,选中弹框中一个设备添加到另一个表格中, 分页切换时，使选中的操作不消失，再次选择这个设备表格,使之前选中的设备禁用不能选中，

Answer 1

引自免费微信小程序：皆我百晓生

为了实现你的需求，你需要在 Vue.js 中管理设备选择状态并处理分页切换时的选择保留。下面是一个简单的示例，展示了如何实现这一功能。

首先，你需要在组件的数据对象中定义一些属性：

<script>
export default {
  data() {
    return {
      // 设备列表
      devices: [
        { id: 1, name: 'Device 1' },
        { id: 2, name: 'Device 2' },
        // 更多...
      ],
      // 当前选中的设备 ID 列表
      selectedDevices: [],
      // 当前分页信息
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: this.devices.length,
      },
    };
  },
};
</script>

然后，在你的设备表格组件中，你可以使用 v-model 和 v-bind:key 来绑定设备列表和选中状态：

<template>
  <el-table :data="filteredDevices" style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="设备名称"></el-table-column>
    <!-- 其他列 -->
  </el-table>

  <!-- 分页器 -->
  <el-pagination
    @current-change="handlePaginationChange"
    :page-size="pagination.pageSize"
    :current-page.sync="pagination.currentPage"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total"
  ></el-pagination>
</template>

<script>
export default {
  computed: {
    filteredDevices() {
      const startIndex = (this.pagination.currentPage - 1) * this.pagination.pageSize;
      const endIndex = startIndex + this.pagination.pageSize;

      return this.devices.slice(startIndex, endIndex).map((device, index) => ({
        ...device,
        isDisabled: this.selectedDevices.includes(device.id),
      }));
    },
  },
  methods: {
    handlePaginationChange(page) {
      this.pagination.currentPage = page;
    },
    addSelectedDevice(deviceId) {
      if (!this.selectedDevices.includes(deviceId)) {
        this.selectedDevices.push(deviceId);
      }
    },
    removeSelectedDevice(deviceId) {
      this.selectedDevices = this.selectedDevices.filter(
        (selectedDeviceId) => selectedDeviceId !== deviceId
      );
    },
  },
};
</script>

在这个例子中，我们使用了 filteredDevices 计算属性来动态过滤出当前分页范围内的设备，并且根据 selectedDevices 列表将已经选择的设备设置为不可选（通过 isDisabled 属性）。

当用户点击设备行时，调用 addSelectedDevice 或 removeSelectedDevice 方法来更新选中状态。确保在弹窗中添加设备时，也调用相应的函数来维护选中状态。

这只是一个基础的实现，你可能还需要根据实际项目的需求进行调整。例如，你可能需要在一个单独的服务或者 store 中管理这些状态，以便在多个组件之间共享数据。如果你有其他具体的问题或者需要进一步的帮助，请随时告诉我。