按照以上的josn数据生成表格 有三列 ,第一列料号,第二列lotId,第三列时删除按钮,使用uview语言来写
时间: 2024-05-20 11:17:40 浏览: 14
<template>
<view class="container">
<view class="title">表格</view>
<view class="table-header">
<view class="table-cell">料号</view>
<view class="table-cell">LotId</view>
<view class="table-cell">操作</view>
</view>
<view class="table-body">
<view class="table-row" v-for="(item, index) in tableData" :key="index">
<view class="table-cell">{{ item.material }}</view>
<view class="table-cell">{{ item.lotId }}</view>
<view class="table-cell">
<button class="del-btn" @click="deleteRow(index)">删除</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tableData: [
{
material: '1001',
lotId: '1111'
},
{
material: '1002',
lotId: '2222'
},
{
material: '1003',
lotId: '3333'
}
]
}
},
methods: {
deleteRow(index) {
this.tableData.splice(index, 1);
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
font-size: 36rpx;
margin-top: 30rpx;
margin-bottom: 20rpx;
}
.table-header {
display: flex;
flex-direction: row;
width: 100%;
height: 60rpx;
background-color: #eee;
border-bottom: 1rpx solid #ccc;
box-sizing: border-box;
padding: 0 20rpx;
}
.table-cell {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.table-body {
width: 100%;
box-sizing: border-box;
padding: 20rpx;
}
.table-row {
display: flex;
flex-direction: row;
width: 100%;
height: 60rpx;
border-bottom: 1rpx solid #ccc;
box-sizing: border-box;
padding: 0 20rpx;
}
.del-btn {
background-color: #f00;
color: #fff;
border: none;
border-radius: 5rpx;
padding: 10rpx 20rpx;
font-size: 28rpx;
cursor: pointer;
}
</style>