手搓表格全选反选实现步骤

最新推荐文章于 2024-09-30 15:42:36 发布

星辰.

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量360

点赞数 13

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_67385044/article/details/135125250

版权

本文介绍了如何在Vue应用中使用表格展示数据，涉及内容布局、v-model绑定、checkbox的选择状态管理以及搜索功能。作者通过实例演示了如何使用computed计算属性监听全选状态和数据过滤操作。

摘要由CSDN通过智能技术生成

1、实现表格的内容

这块儿是样式以及内容的布局，如有不同可自行更改，原理不变

 <div class="region">
      <div class="regionOperation">
        <input type="text" v-model="val" @input="search" />
        <!-- <button @click="search">搜索</button> -->
        <div
          class="operationList"
          :class="{ selectNoneoperationList: isAllSelect }"
        >
          <div class="selectAllContainer">
            <span>全选：</span>
            <input type="checkbox" v-model="isAllSelect" />
          </div>
          <!-- <button class="reverseSelectionButton" @click.prevent="ReverseSelection">反选</button> -->
        </div>
      </div>
      <ul class="optionList">
        <li v-for="(value, key) in SimulationData" :key="key">
          <input
            type="checkbox"
            v-model="value.isSelect"
            @change="SelectOrCancel"
          />
          <span>{{ value.dataContent }}</span>
        </li>
      </ul>
    </div>

2、数据

然后定义我们需要是数据，这个我是模拟假数据，你们直接替换返回的接口数据即可

 SimulationData: [
        {
          dataContent: "模拟数据：唐僧",
          isSelect: true,
        },
        {
          dataContent: "模拟数据：孙悟空",
          isSelect: true,
        },
        {
          dataContent: "模拟数据：猪八戒",
          isSelect: true,
        },
        {
          dataContent: "模拟数据：沙僧",
          isSelect: true,
        },
        {
          dataContent: "模拟数据：白龙马",
          isSelect: true,
        },
      ],
      arr: [
        {
          dataContent: "模拟数据：唐僧",
          isSelect: true,
        },
        {
          dataContent: "模拟数据：孙悟空",
          isSelect: true,
        },
        {
          dataContent: "模拟数据：猪八戒",
          isSelect: true,
        },
        {
          dataContent: "模拟数据：沙僧",
          isSelect: true,
        },
        {
          dataContent: "模拟数据：白龙马",
          isSelect: true,
        },
      ],
      val: "",

3、操作

利用computed的来监听勾选的状态，用v-model绑定我们的全选的勾选框

computed: {
    isAllSelect: {
      set(value) {
        // 作用：获取全选框的状态(true/false)，然后修改选项框状态
        this.SimulationData.forEach((SimulationDataAllSelect) => {
          SimulationDataAllSelect.isSelect = value;
        });
      },
      get() {
        // 作用：监听选项框状态 -> 全选状态
        // every() 查找数组里不符合条件的数据，如果有查找到直接返回 false
        return this.SimulationData.every(
          (SimulationDataAllSelect) => SimulationDataAllSelect.isSelect === true
        );
      },
    },
  },

4、实现

最后掉用我们写好的函数

methods: {
    // 用于你们操作自己的事件
    SelectOrCancel() {},
    search() {
      console.log(this.val);

      this.SimulationData = this.SimulationData.filter((item) => {
        return item.dataContent.includes(this.val);
      });
      if (this.val == "") {
        this.SimulationData = this.arr;
        console.log(this.arr);
      }
    },
  },