<template>
  <div class="table">
    <el-table :data="tableData" stripe style="width: 100%; height: 100%">
      <el-table-column fixed type="selection" width="55" />
      <el-table-column align="center" prop="date" label="设备序列号" fixed />
      <el-table-column
        align="center"
        prop="name"
        label="设备类型"
      />
      <el-table-column
        align="center"
        prop="state"
        label="制造厂商"
      />
      <el-table-column
        align="center"
        prop="address"
        label="MAC/IP"
        show-overflow-tooltip
      />
      <!-- <el-table-column align="center" fixed="right" label="操作" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick">
            删除
          </el-button>
          <el-button link type="primary" size="small">修改</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
const handleClick = () => {
  console.log("click");
};

const tableData = [
  {
    date: "B0000F03",
    name: "PQS882",
    state: "南京灿能",
    city: "Los Angeles",
    address: "192.168.0.0.0",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "B0000F02",
    name: "PQS882",
    state: "南京灿能",
    city: "Los Angeles",
    address: "192.168.0.0.0",
    zip: "CA 90036",
    tag: "Office",
  },
  {
    date: "B0000F04",
    name: "PQS882",
    state: "南京灿能",
    city: "Los Angeles",
    address: "192.168.0.0.0",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "B0000F01",
    name: "PQS882",
    state: "南京灿能",
    city: "Los Angeles",
    address: "192.168.0.0.0",
    zip: "CA 90036",
    tag: "Office",
  },
];
onMounted(() => {
  console.log(
    tableData,
    "tableDatatableDatatableDatatableDatatableDatatableDatatableData"
  );
});
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  height: 100%;
}
</style>
