钉钉小程序实现简单表格以及表格数据单选

效果图

需求

根据关键字查询出企业信息，查询结果以表格的形式展示，并且可实现单选，根据所选数据实现其他功能

页面

<!-- 查询结果 -->
  <view class="table" a:if="{{enterpriseList.length > 0}}">
    <view class="tr bg-w">
      <view class="th">园区名称</view>
      <view class="th">代码证号</view>
      <view class="th ">行业</view>
      <view class="th ">客群分类</view>
      <view class="th ">#</view>
    </view>
    <block a:for="{{enterpriseList}}" a:for-index="idx" a:for-item="item">
      <view class="tr bg-g">
        <text selectable="true" class="td">{{item.CompanyName}}</text>
        <text selectable="true" class="td">{{item.CreditNo}}</text>
        <text selectable="true" class="td">{{item.CategoryType}}</text>
        <text selectable="true" class="td">{{item.CompanyType}}</text>
        <text class="td">
          <radio 
            value="{{ item.CreditNo }}" 
            onChange="radioChange"
            data-item="{{ item }}"
            data-index="{{ idx }}"
            checked="{{ current == idx }}"
          />
        </text>
      </view>
    </block>
    <view style="display: flex; justify-content: center;">
      <button class="get-btn" type="primary" onTap="">领用</button>
    </view>
  </view>

js

  data: {
  	current: 0,    // 默认选中第一条
  }
  radioChange($event){
  	// 通过$event可以获取到radio标签上自定义的属性 index 与 item
  	// 可以根据获取到的表格数据做后续的操作
    this.setData({
      current: $event.target.dataset.index,      // 改变选中的行    
      parkId: $event.target.dataset.item.parkId
    })
  },