<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="100%"
      :default-expand-all="false"
      row-key="id"
      :border="false"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column width="100">
        <template #default="scope">
          <el-checkbox
          v-if="!scope.row.children"
            v-model="checked1"
            size="large"
            @change="checkedChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleClick(scope.row)">
            Detail
          </el-button>
          <el-button type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const checked1 = ref(false);
  const tableData = ref([
    {
      id: 1,
      date: '2016-05-02',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',

    },
    {
      id: 2,
      date: '2016-05-04',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
  
    },
    {
      id: 3,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',

      children: [
        {
          id: 31,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          id: 32,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
          children: [
            {
              id: 321,
              date: '2016-05-01',
              name: 'wangxiaohu',
              address: 'No. 189, Grove St, Los Angeles',
            },
          ],
        },
      ],
    },
    {
      id: 4,
      date: '2016-05-03',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]);
  
  const checkedChange = (row) => {
    console.log(row);
  };
  
  const handleClick = (row) => {
    console.log('Row clicked:', row);
  };
  </script>