<template>
  <div class="container">
    <div class="left">
      <div class="button_group">
        <!--        <button @click="random_change_data">修改某一列的數(shù)據(jù)</button>-->
      </div>
    </div>
    <div class="right son">
      <son_component :table_data="table_data"></son_component>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import son_component from "@/components/son_component.vue";

export default Vue.extend({
  name: "FatherComponent",
  components: {
    son_component,
  },
  data() {
    return {
      table_data: [],
    };
  },
  mounted() {
    this.init_data();
  },
  methods: {
    init_data() {
      for (let i = 0; i < 100; i++) {
        (
          this.table_data as never as [
            { name: string; age: number; check: boolean }
          ]
        ).push({
          name: `alex${i}`,
          age: i,
          check: false,
        });
      }
      console.log(this.table_data);
    },
    generate_random_number(max: number) {
      return Math.floor(Math.random() * max) + 1;
    },
    // random_change_data() {
    //   /**
    //    * 隨機修改某一列的數(shù)據(jù)
    //    */
    //   const index = this.generate_random_number(this.table_data.length);
    //   // (this.table_data[index] as { age: number }).age = 100;
    //   const item = this.table_data[index] as { age: number };
    //   item.age = 100;
    //   this.$set(this, index, item);
    // },
  },
});
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.left,
.right {
  width: 50vw;
}

.left {
  margin: 0 auto;
  line-height: 100%;
  text-align: center;
}
</style>

	<template>
  <div>
    <div class="table_data">
      <table>
        <thead>
          <tr>
            <th>名字</th>
            <th>年齡</th>
            <th><input type="checkbox" v-model="is_all" /></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.name">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td><input type="checkbox" v-model="item.check" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { cloneDeep } from "lodash";

export default Vue.extend({
  name: "son_component",
  data() {
    return {
      is_all: true,
      selection: [], // 選擇的數(shù)據(jù)
      data: [], // 表格數(shù)據(jù)
    };
  },
  props: {
    table_data: {
      type: Array,
      default: () => [],
    },
    choice_list: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    choice_list: {
      handler(new_: [string], old_) {
        console.log("choice_list 發(fā)生了改變");
        /**
         * 根據(jù)名字去判斷是否選擇
         */
        if (new_) (this.selection as any) = this.choice_list.concat(new_);
      },
      immediate: true,
      deep: true,
    },
    table_data: {
      handler(new_) {
 					(this.data as any) = this.table_data;
      }
    },
  },
});
</script>

<style scoped></style>