在vue中用elementui生成一个名为船舶数据的表格有船号,船号,北斗号,MMSL,短波,安全码,船主姓名,船主联系方式,船主地址,船长姓名,船主联系方式,船长,船宽,船深,船籍港,总功率,作业类型,吨位1,吨位2,操作的表格;并生成一些表格里面的数据
时间: 2024-04-25 07:24:16 浏览: 15
在Vue中使用Element UI生成一个名为"船舶数据"的表格,包含上述所列的各个列,并生成一些示例数据,可以按照以下代码示例进行实现:
```vue<template>
<div class="container">
<el-table :data="tableData" style="width:100%">
<el-table-column prop="shipNumber" label="船号"></el-table-column>
<el-table-column prop="beidouNumber" label="北斗号"></el-table-column>
<el-table-column prop="mmsl" label="MMSL"></el-table-column>
<el-table-column prop="shortWave" label="短波"></el-table-column>
<el-table-column prop="securityCode" label="安全码"></el-table-column>
<el-table-column prop="ownerName" label="船主姓名"></el-table-column>
<el-table-column prop="ownerContact" label="船主联系方式"></el-table-column>
<el-table-column prop="ownerAddress" label="船主地址"></el-table-column>
<el-table-column prop="captainName" label="船长姓名"></el-table-column>
<el-table-column prop="captainContact" label="船长联系方式"></el-table-column>
<el-table-column prop="length" label="船长"></el-table-column>
<el-table-column prop="width" label="船宽"></el-table-column>
<el-table-column prop="depth" label="船深"></el-table-column>
<el-table-column prop="portOfRegistry" label="船籍港"></el-table-column>
<el-table-column prop="totalPower" label="总功率"></el-table-column>
<el-table-column prop="operationType" label="作业类型"></el-table-column>
<el-table-column prop="tonnage1" label="吨位1"></el-table-column>
<el-table-column prop="tonnage2" label="吨位2"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
shipNumber: "001",
beidouNumber: "BD001",
mmsl: "MMSL001",
shortWave: "SW001",
securityCode: "SC001",
ownerName: "船主A",
ownerContact: "123456789",
ownerAddress: "地址A",
captainName: "船长A",
captainContact: "987654321",
length: "100",
width: "10",
depth: "5",
portOfRegistry: "港口A",
totalPower: "1000",
operationType: "作业类型A",
tonnage1: "1000",
tonnage2: "2000"
},
{
shipNumber: "002",
beidouNumber: "BD002",
mmsl: "MMSL002",
shortWave: "SW002",
securityCode: "SC002",
ownerName: "船主B",
ownerContact: "987654321",
ownerAddress: "地址B",
captainName: "船长B",
captainContact: "123456789",
length: "200",
width: "15",
depth: "7.5",
portOfRegistry: "港口B",
totalPower: "2000",
operationType: "作业类型B",
tonnage1: "1500",
tonnage2: "2500"
}
]
};
}
};
</script>
<style scoped>
.container {
padding:20px;
}
</style>
```
在上述代码中,我们使用了Element UI的 `<el-table>` 和 `<el-table-column>` 组件来生成表格,并通过 `:data` 属性绑定了 `tableData` 数组作为数据源。
每个 `<el-table-column>` 组件的 `prop` 属性对应了 `tableData` 数组中的属性名,用于指定表格的列名。`label` 属性用于设置列名在表头中显示的文本。
在示例数据中,我们提供了两个对象作为示例数据,包含了每个列对应的值。
通过以上代码示例,你可以在Vue中生成一个名为"船舶数据"的表格,并填充一些示例数据。希望能对你有所帮助!如果还有其他问题,请随时提问。