Files
pqs-9100_client/frontend/src/views/home/components/table.vue

90 lines
2.0 KiB
Vue
Raw Normal View History

2024-08-23 13:19:20 +08:00
<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>