vue實現功能 單選 取消單選 全選 取消全選

vue實現功能 單選 取消單選 全選 取消全選

• 代碼部分

<template>
  <div class="">
    <h1>全選框</h1>
    <center>
      <button @click="checkAnti">反選</button>

      <table border="1px">
        <tr>
          <!-- 全選框 -->
          <td>
            <input type="checkbox" @click="checkall" v-model="allchecked" />
          </td>
          <td>姓名</td>
          <td>年齡</td>
        </tr>
        <tr v-for="(item, index) in listData" :key="index">
          <td>
            <input
              type="checkbox"
              v-model="item.status"
              @change="redio()"
            />
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </table>
    </center>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allchecked: false, //全選 預設為false
      //數據
      listData: [
        //數據
        {
          name: "張三",
          age: 18,
          status: false,
        },
        {
          name: "李四",
          age: 18,
          status: true,
        },
        {
          name: "王五",
          age: 18,
          status: false,
        },
        {
          name: "趙六",
          age: 18,
          status: true,
        },
      ],
      status: [],
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    //單選框方法
    redio() {
      /* 
      findIndex() 方法返回的是傳入的一個需求條件（函數）符合條件的數組的第一個元素位置;
      本題思路: 
            遍曆數據集合中的每一個status屬性 是否為false(如果有一個false則說明沒有全部選中全選不需要為true)
            當不符合條件 即: 遍歷集合中的屬性沒有false的屬性 則全選框需要被點亮
      */
      if (this.listData.findIndex( target => target.status === false) == -1) {
        // console.log("驗證通過");
        this.allchecked=true
      } else {
        // console.log("驗證不通過");
        this.allchecked=false
      }
    },
    //反選
    checkAnti() {
      this.listData.forEach((item) => {
        item.status = !item.status;
      });
    },
    //全選 取消全選
    checkall() {
      this.allchecked = !this.allchecked;
      this.listData.forEach((item) => {
        item.status = this.allchecked;
      });
    },
  },
};
</script>

<style  scoped>
</style>

本文來自博客園，作者：萬神·，轉載請註明原文鏈接：https://www.cnblogs.com/wanshen/p/16790053.html