90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<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>
|