乐趣区

关于微信小程序:微信小程序封装公共组件table表格

jiezi

因为小程序可能不止一个页面须要用表格展现数据，所以在 components 里封装公共组件，如下图：

  1. 首先，在 myTable 组件的 index.wxml 写好布局，这里次要是表格头部，表格内容则通过 slot 插槽插入进来 
<view class="my-table-wrap">

  <view class="my-table">

    <view class="my-table-thead">
      <view class="my-tr">
        <view
        class="my-th"
        style="width:{{item.width}}"
        wx:for-items="{{tableHeadData}}"
        wx:key="index"
        >{{item.title}}</view>
      </view>
    </view>

    <view class="my-table-tbody">

      <slot></slot>

    </view>

  </view>

</view>
  1. 表格的每一列是一个公共组件 myTableCol，其 index.wxml 内容如下：
<view style="height: 100%;">

  <view wx:if="{{prop}}" class="my-table-tbody-col">
    <block wx:for-items="{{list}}" wx:key="index">
      <view class="my-td">{{item}}</view>
    </block>
  </view>

  <view wx:else class="my-table-tbody-col">
    <view class="my-td-op" wx:for="{{tableData}}" wx:key="id" wx:for-index="row">
      <block wx:for-items="{{operateList}}" wx:key="index">
        <view class="blueviolet-edit" bindtap="operate" data-row="{{row}}" data-index="{{index}}">{{item}}</view>
      </block>
    </view>
  </view>

</view>

分为两种状况，传了 prop 的一般列和操作列，myTableCol 的 index.js 内容如下：

Component({
  properties: {
    prop: {type: String},
    label: {type: String},
    width: {type: String},
    tableData: {
      type: Array,
      observer: function(newVal, oldVal) {
        // 当编辑表格时，会从新申请表格数据，这里就会渲染
        let list = newVal.map(i=> i[this.properties.prop])
        this.setData({list})
      }
    },
    operate: {type: String},

  },

  pageLifetimes: {show() {if(this.properties.prop){
        // 筛选出每一一般列的数据
        let list = this.properties.tableData.map(i=> i[this.properties.prop])
        this.setData({list})
        
      }else{
        // 操作列
        let operateList = this.properties.operate.split(',')
        this.setData({operateList})
        
      }
      

    }
  },
  data: {list:[],
    operateList:[],},

  methods: {operate(e){
    // 操作列的点击事件，须要传给父组件两个信息：点了表格的哪一行（row），点了按钮的哪一个（index）this.triggerEvent('getOperateIndex', { 
        row: e.target.dataset.row,
        index: e.target.dataset.index,
      })

    },

  }
})
  1. 在页面援用，须要先在应用的页面的 index.json 文件中写上：
  "usingComponents": {
    "myTable":"../../components/myTable/index",
    "myTableCol":"../../components/myTableCol/index"
  }

而后在 index.wxml 文件里应用组件，例如：

      <view class="table">

        <myTable tableHeadData="{{empTableHeadData}}">
          <myTableCol tableData="{{empList}}" prop="nickname" style="width:20%"></myTableCol>
          <myTableCol tableData="{{empList}}" prop="mobile" style="width:30%"></myTableCol>
          <myTableCol tableData="{{empList}}" prop="job" style="width:20%"></myTableCol>
          <myTableCol tableData="{{empList}}" prop="state" style="width:15%"></myTableCol>
          <myTableCol tableData="{{empList}}" operate="编辑, 删除" style="width:15%" bind:getOperateIndex="getEmpOperateIndex"></myTableCol>
        </myTable>

      </view>

父组件的 index.js 中，getEmpOperateIndex 办法接管公共组件传过来的参数：

  getEmpOperateIndex(e) {
  // e.detail.row 示意点了哪一行
    if (e.detail.index == 0) {// 点了编辑} else if (e.detail.index == 1) {// 点了删除}
}

4. 实现之后，成果如下图：

退出移动版