点击选择资产按钮时，打开弹框资产列表，选中资产，切换分页时，使选中的状态不会消失，确定后，添加到表格中，再次点击资产按钮打开弹框，使之前选中的，保持禁用且选中，分页的也禁用和选中

Question

点击选择资产按钮时，打开弹框资产列表，选中资产，切换分页时，使选中的状态不会消失，确定后，添加到表格中，再次点击资产按钮打开弹框，使之前选中的，保持禁用且选中，分页的也禁用和选中

Answer 1

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

要实现这个功能，你需要在Vue项目中创建一个组件，包括两个部分：主页面和弹出框。这里是一个简化的示例，展示了如何实现这些需求。

首先，在你的src/components目录下创建一个新的文件，例如AssetSelector.vue，然后将以下代码粘贴进去：

<template>
  <div>
    <button @click="openModal">选择资产</button>
    <asset-modal ref="assetModal" :selectedAssets.sync="selectedAssets"></asset-modal>

    <table>
      <thead>
        <tr>
          <th>植被资产名称</th>
          <th>植被资产种类</th>
          <th>植被资产数量</th>
          <th>区域位置</th>
          <th>覆盖面积 (m²)</th>
          <th>碳吸收量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(asset, index) in selectedAssets" :key="index">
          <td>{{ asset.name }}</td>
          <td>{{ asset.category }}</td>
          <td>{{ asset.quantity }}</td>
          <td>{{ asset.regionPosition }}</td>
          <td>{{ asset.coverageArea }}</td>
          <td>{{ asset.carbonAbsorption }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import AssetModal from './AssetModal.vue';

export default {
  components: {
    AssetModal,
  },
  data() {
    return {
      selectedAssets: [],
    };
  },
  methods: {
    openModal() {
      this.$refs.assetModal.open();
    },
  },
};
</script>

接下来，创建一个名为AssetModal.vue的文件，用于显示资产列表和分页：

<template>
  <transition name="fade">
    <div class="modal" v-if="isOpen">
      <div class="modal-content">
        <h2>选择资产</h2>
        <input type="text" placeholder="Q 搜索" v-model="searchQuery" />
        <button @click="resetSearch">C 重置</button>
        <ul>
          <li
            v-for="(asset, index) in filteredAssets"
            :key="index"
            :class="{ 'active': isSelected(asset), 'disabled': isCurrentPageDisabled(asset) }"
            @click="selectAsset(asset)"
          >
            {{ asset.name }}
          </li>
        </ul>
        <nav>
          <ul class="pagination">
            <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
              <a href="#" @click="goToPage(page)">{{ page }}</a>
            </li>
          </ul>
        </nav>
        <button @click="confirmSelection">确定</button>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    selectedAssets: { type: Array, required: true },
  },
  data() {
    return {
      isOpen: false,
      searchQuery: '',
      currentPage: 1,
      assetsPerPage: 10,
    };
  },
  computed: {
    filteredAssets() {
      return this.assets.filter((asset) => {
        const query = this.searchQuery.toLowerCase();
        return asset.name.toLowerCase().includes(query);
      }).slice(
        (this.currentPage - 1) * this.assetsPerPage,
        this.currentPage * this.assetsPerPage
      );
    },
    totalPages() {
      return Math.ceil(this.totalAssetsCount / this.assetsPerPage);
    },
    totalAssetsCount() {
      return this.selectedAssets.length;
    },
  },
  methods: {
    open() {
      this.isOpen = true;
    },
    close() {
      this.isOpen = false;
      this.searchQuery = '';
    },
    selectAsset(asset) {
      if (!this.isSelected(asset)) {
        this.selectedAssets.push(asset);
      }
    },
    resetSearch() {
      this.searchQuery = '';
    },
    goToPage(page) {
      if (page > 0 && page <= this.totalPages) {
        this.currentPage = page;
      }
    },
    confirmSelection() {
      this.close();
      // 如果你想更新父组件的数据，可以使用$emit('update:selectedAssets', this.selectedAssets)
    },
    isSelected(asset) {
      return this.selectedAssets.includes(asset);
    },
    isCurrentPageDisabled(asset) {
      return !isSelected(asset) || this.currentPage !== 1;
    },
  },
};
</script>

<style scoped>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在这个例子中，我们创建了一个名为AssetModal的组件，它接收一个名为selectedAssets的属性，该属性是双向绑定的。当用户在弹出框中选择资产并点击确定后，它们会被添加到父组件的selectedAssets数组中。同时，我们还实现了搜索、分页和禁用已选择项的功能。

为了更好地理解这个例子，你需要将其整合到你的Vue项目中，并确保已经安装了Vue Router和其他依赖项。这只是一个基础示例，可能需要根据你的实际需求进行调整。如果你有任何疑问或需要进一步的帮助，请随时告诉我。