Test1.vue

<template>
  <div class="test1">
    <h1>This is a test1 page</h1>
    <Test1Top :add-person="addPerson"/>
    <Test1Center :persons="persons"
                 :del-person="delPersonWithIndex"
                 :selected-all-persons="selectedAllPerson"/>
    <
 
Test1Bottom :persons="persons"
                 :del-checked-persons="delCheckedPersons"/>
  </div>
</template>

<script>
// @ is an alias to /src
import Test1Top from '@/components/Test1Top.vue';
import Test1Center from '@/components/Test1Center.vue';
import Test1Bottom from '@/components/Test1Bottom.vue
 
';

export default {
  name: 'Test1',
  data(){
    return{
      persons:[
        {id:1,name:"張三",age:24,selected:false},
        {id:2,name:"李四",age:27,selected:false},
        {id:3,name:"王五",age:30,selected:false}
      ]
    }
  },
  methods:{
    delPersonWithIndex(index){
      this.persons.splice(index,
 
1);
    },
    addPerson(person){
      this.persons.unshift(person);
    },
    selectedAllPerson(isChecked){
      this.persons.forEach((person)=>{
        // console.log()
        person.selected = isChecked;
      });
    },
    delCheckedPersons(){
      this.persons = this.persons.filter((person)=>{
          return !person.selected;
      })
    }
  },
  components: {
    Test1Top,Test1Center,Test1Bottom
  }
}
</script>

Test1Top.vue

<template>
  <div>
    Test1Top
    <input type="text" placeholder="請輸入name"
           v-model="name" @keyup.enter="add_person">
  </div>
</template>

<script>
export default {
  name: 'Test1Top',
  data(){
    return{
      name:''
    }
  },
  props:{
    addPerson:Function
  },
  methods:{
    add_person(){
      const name = this.name.trim();
      // console.log(name)
      if(!name){
        alert("name must not null");
        return;
      }
      let person = {id:'',name:name,age:30};
      this.addPerson(person);
      this.name = '';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Test1Bottom.vue

<template>
  <div>
    Test1Bottom
    <span> 共{{ persons.length }}條  已選{{}}條</span>
    <button @click="delCheckedPersons">刪除選中資料</button>
  </div>

</template>

<script>
export default {
  name: 'Test1Bottom',
  props:{
    persons: Array,
    delCheckedPersons:Function
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Test1Center.vue

<template>
<div>
  Test1Center
  <div>
     <table border="1px;" width="80%;">
       <tr>
         <th><input type="checkbox"></th>
         <th>id</th>
         <th>name</th>
         <th>age</th>
         <th>操作</th>
       </tr>
       <Test1Item  v-for="(person,index) in persons"
                   :key="person.id"
                   :person="person"
                   :index="index"
                   :del-person="delPerson"></Test1Item>
     </table>
  </div>
</div>
</template>

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

export default {
  name: 'Test1Center',
  data(){
    return{

    }
  },
  props: {
    persons: Array,
    delPerson: Function,
    selectedAllPerson: Function
  },
  methods:{

  },
  components: {
    Test1Item
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Test1Bottom.vue

<template>
  <tr  @mouseenter="dealShow(true)"
       @mouseleave="dealShow(false)"
       :style="{backgroundColor:bgColor}">
    <td><input type="checkbox"/></td>
    <td>{{person.id}}</td>
    <td>{{person.name}}</td>
    <td>{{person.age}}</td>
    <td>
      <button v-show="isShowDelBtn" @click="delItem">刪除</button>
    </td>
  </tr>
</template>

<script>
export default {
  name: 'Test1Item',
  data(){
    return{
      isShowDelBtn:false,
      bgColor:'#fff'
    }
  },
  props:{
    person:Object,
    index:Number,
    delPerson:Function
  },
  methods:{
    dealShow(isShow){
      this.isShowDelBtn=isShow;
      this.bgColor=isShow? '#ddd':'#fff';
    },
    delItem(){
      if(window.confirm('del confirm?')){
        this.delPerson(this.index);
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>