Vue.js中基于复选框选择实现表格数据显隐的功能问题

看起来你已经走对了第一步——用v-model把选中的行数据收集到inactiveList里了，接下来只需要把这个数组和显示逻辑绑定起来，再配合按钮切换状态就可以实现需求了。下面是具体的修改方案：

步骤1：简化复选框绑定，移除多余逻辑 #

你的复选框已经用v-model="inactiveList"了，这个指令会自动帮你维护选中项的数组，不需要额外的v-on:change="list"事件，所以可以把这个事件去掉，同时删掉没用的list方法和selected变量。

步骤2：添加显隐状态控制变量 #

在data里新增一个isRowsHidden变量，用来标记当前是"隐藏选中行"还是"恢复显示"的状态：

data(){
  return{
    currentPage: 1,
    itemsPerPage: 10,
    resultCount: 0,
    inactiveList:[],
    isRowsHidden: false, // 新增：控制显隐状态
  }
},

步骤3：修改paginate计算属性，实现过滤逻辑 #

原来的paginate只是做分页，现在要加上显隐过滤：当isRowsHidden为true时，返回排除了inactiveList中项的分页数据；为false时返回全部分页数据。

修改后的paginate：

paginate: function() {
  if (!this.posts) return [];
  
  this.resultCount = this.posts.length;
  if (this.currentPage >= this.totalPages) {
    this.currentPage = this.totalPages;
  }
  
  var index = this.currentPage * this.itemsPerPage - this.itemsPerPage;
  let paginatedData = this.posts.slice(index, index + this.itemsPerPage);
  
  // 根据显隐状态过滤数据
  if (this.isRowsHidden) {
    // 过滤掉inactiveList里的项，通过id匹配
    return paginatedData.filter(item => !this.inactiveList.some(inactiveItem => inactiveItem.id === item.id));
  } else {
    return paginatedData;
  }
},

步骤4：完善按钮点击方法seen #

原来的seen方法只是打印id，现在改成切换isRowsHidden的状态，同时可以修改按钮的显示文本，让用户更清楚当前操作：

methods: {
  setPage: function(pageNumber) {
    this.currentPage = pageNumber;
  },
  seen: function(){
    // 切换显隐状态
    this.isRowsHidden = !this.isRowsHidden;
  },
},

同时修改按钮的文本，根据状态动态变化：

<button class="btn btn-lg btn-primary" v-on:click="seen">
  {{ isRowsHidden ? '恢复显示选中行' : '隐藏选中行' }}
</button>

完整修改后的组件代码片段 #

模板部分： #

<button class="btn btn-lg btn-primary" v-on:click="seen">
  {{ isRowsHidden ? '恢复显示选中行' : '隐藏选中行' }}
</button>
<table class="row-border hover">
  <tr>
    <th>Id</th>
    <th>Title</th>
    <th>UserId</th>
    <th>Change Detail</th>
    <th>Add Detail</th>
    <th>操作</th> <!-- 加个表头更清晰 -->
  </tr>
  <tr v-for = "(item,index) in paginate " :key= "index">
    <td>{{item.id}}</td>
    <td>{{item.title}}</td>
    <td>{{item.userId}}</td>
    <td><button class="btn btn-primary" >Edit</button></td>
    <td><button class="btn btn-primary" >Add</button></td>
    <td>
      <input type="checkbox" name="vehicle1" v-bind:value="item" v-model="inactiveList"><br>
    </td>
  </tr>
</table>
<ul>
  <li v-for="pageNumber in totalPages" v-if="Math.abs(pageNumber - currentPage) < 3 || pageNumber == totalPages || pageNumber == 1">
    <a v-bind:key="pageNumber" href="#" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{{ pageNumber }}</a>
  </li>
</ul>

脚本部分： #

export default {
  name: 'component2',
  data(){
    return{
      currentPage: 1,
      itemsPerPage: 10,
      resultCount: 0,
      inactiveList:[],
      isRowsHidden: false, // 新增状态变量
    }
  },
  computed: {
    ...mapState([
      'posts',
      'loading'
    ]),
    totalPages: function() {
      return Math.ceil(this.resultCount / this.itemsPerPage)
    },
    paginate: function() {
      if (!this.posts) return [];
      
      this.resultCount = this.posts.length;
      if (this.currentPage >= this.totalPages) {
        this.currentPage = this.totalPages;
      }
      
      var index = this.currentPage * this.itemsPerPage - this.itemsPerPage;
      let paginatedData = this.posts.slice(index, index + this.itemsPerPage);
      
      // 显隐过滤逻辑
      if (this.isRowsHidden) {
        return paginatedData.filter(item => !this.inactiveList.some(inactiveItem => inactiveItem.id === item.id));
      } else {
        return paginatedData;
      }
    },
  },
  methods: {
    setPage: function(pageNumber) {
      this.currentPage = pageNumber;
    },
    seen: function(){
      this.isRowsHidden = !this.isRowsHidden;
    },
  },
  mounted() {
    this.$store.dispatch('loadPost');
  },
}

这样修改后，你勾选复选框后点击按钮，选中的行就会隐藏；再次点击按钮，所有行都会恢复显示，完美实现你的需求。

内容的提问来源于stack exchange，提问作者mukesh rawat