小程序自制表格

最新推荐文章于 2023-11-18 15:13:52 发布

slilx

最新推荐文章于 2023-11-18 15:13:52 发布

阅读量151

点赞数

文章标签：小程序 windows 服务器

本文链接：https://blog.csdn.net/slilx/article/details/131744968

版权

废话不多说直接上代码

index.wxml


<view class="table">
  <view class="tr">
     <view class="th">商品名称</view>
     <view class="th">商品编号</view>
     <view class="th">商品数量</view>
  </view> 

  <van-checkbox-group value="{{ result }}" data-key="result3" bind:change="onChange">
   <view wx:for="{{list}}" wx:key="index" name="{{ item }}"> 
      <van-checkbox shape="square" name="{{item.id}}"> 
       <view class="tr">
         <view class="td">{{ item.goodsName}} </view>
         <view class="td">{{ item.goodsNo }} </view>
         <view class="td">{{ item.goodsCount }}</view>
       </view>
      </van-checkbox>
   </view>
  </van-checkbox-group>
</view>

index.wxss


.table {
  border: 1px solid #dadada;
  border-right: 0;
  border-bottom: 0;
  width: 98%;
}
 
.tr {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
 
.th, .td {
  padding: 10px;
  border-bottom: 1px solid #dadada;
  border-right: 1px solid #dadada;
  text-align: center;
  width: 100%;
}
 
.th {
  font-weight: 400;
  background-color: #dadada;
}

index.js

  data: {
    result: [],
      goodsNo: '',
      list:[
        {id:12, goodsName:"衬衣", goodsNo:"GX2123432-01",goodsCount:"1"},
        {id:13, goodsName:"裤子", goodsNo:"GX234234T-02",goodsCount:"1"} ,
        {id:14, goodsName:"鞋帽", goodsNo:"GX2234422-03",goodsCount:"1"} ,
      ]
  },