uniapp自定义table表格

最新推荐文章于 2024-08-29 15:22:54 发布

知恩の盖子

最新推荐文章于 2024-08-29 15:22:54 发布

阅读量1.3k

点赞数

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_56203236/article/details/132004634

版权

该代码示例展示了如何在Vue.js应用中使用scroll-view组件实现分页和下拉加载功能。内容包括一个可滚动的表格，其中数据动态渲染，表头固定，且包含升降价的图标以及点击事件处理。表格列宽根据数据动态调整，提供了排序和自定义格式化功能。

摘要由CSDN通过智能技术生成

<view class="table-box ">
     <scroll-view :refresher-enabled="false"
                     :scroll-x="true"
                     :scroll-y="true"
                     class="h-full w-full"
                     @scrolltolower="loadMore"
        >
      <table id="CustomTable" ref="CustomTable" cellpadding="0px" cellspacing="0px">
        <thead>
        <tr class="table-new-line ">
          <th v-for="(item,index) in theadList" :key="index" :class="index==0?'zd '+item.width:item.width">
            {{ item.text }}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in tableData" :key="index"
            :class="index%2==0?'eventBG':'oddBG'" class="table-new-line ">
          <td v-for="(key,i) of item" :key="i">
            <!--            1上升，0为0，-1下降-->
            <view v-if="typeof(key)=='object'"
                  :class="key.val=='-1'?'text-hex-28F04E':key.val=='1'?'text-hex-FA4B4B':''"
                  class="flex items-center">
              <image v-if="key.val=='-1'" class="w-20rpx h-26rpx roun" src="/static/images/xd@2x.png"></image>
              <image v-else-if="key.val=='1'" class="w-20rpx h-26rpx roun" src="/static/images/sz@2x.png"></image>
              {{ key.data }}
            </view>
            <text v-else @click="i=='value2'&&$emit('click2',{key,i,item})">
              {{ key }}
            </text>
          </td>
        </tr>
        </tbody>
      </table>
    </scroll-view>
    </view>

加入scroll-view来做分页下拉加载

<style lang="scss" scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}

.table-box {
  margin: auto;
  //width: 98vw;
  width: 100%;
  overflow: auto;
  height: 50vh; /* 设置固定高度 */
}

table#CustomTable {
  .th70 { //
    width: 70rpx;
  }

  .th80 {
    width: 80rpx;
  }

  .th90 {
    width: 90rpx;
  }

  .th110 {
    width: 120rpx;
  }

  .th140 {
    width: 140rpx;
  }

  .th150 {
    width: 150rpx;
  }

  .th320 {
    max-width: 320rpx;
    width: 320rpx;
    min-width: 300rpx;
  }

  .oddBG td {
    background-color: #F6F6F7;
  }

  .eventBG td {
    background-color: #FFFFFF;
  }

  /* 去除间隔 */
  border-collapse: collapse;
  /* 打开间隔 */
  /* border-collapse : separate; */
  border: 0.5px solid white;
  table-layout: fixed;
  //text-align: center;
  text-align: left;
  font-size: 28rpx;
  /* 固定宽度 */
  width: 180rpx;
  height: 45rpx;
  thead tr th {
    position: sticky;
    top: -1rpx; /* 首行固定在头部  */
  }

  td, th {
    /* 设置td,th宽度高度 */
    border: 0.5px solid #E1E1E4;
    /* background-color: #ffffff; */
    width: 180rpx;
    height: 80rpx;
    padding-left: 10rpx;
  }
  th {
    z-index: 1;
    background-color: #E8E8EC;
  }
  th.zd {
    z-index: 3;
  }
  //th:not(.is-hidden):last-child, td:not(.is-hidden):last-child { //固定尾项
  //  right: -1px;
  //}
  th:not(.is-hidden):first-child, td:not(.is-hidden):first-child { //固定尾项

    left: -1px;
  }
  td:first-child { //固定项
    position: sticky;
    right: 2rpx;
    z-index: 2;
    width: 180rpx;
    background-color: #FFFFFF;
    //color: #3F8EF9
  }




}

.first-item {
  display: flex;
  justify-content: center;
  /* width: 28%; */
}

.second-item {
  display: flex;
  justify-content: center;
  width: 80%;
}

.auto-new-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
}

.table-new-line {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
}


</style>

使用格式把数据改造成value对象

<panelTableUser :sort_rule.sync="sort_rule_1"
                              :tableData="vacanList"
                              :theadList="[
                                {text:'tr标题',width:'th80'},
                                {text:'tr标题',width:''},
                                {text:'tr标题',width:'th150'},
                                {text:'tr标题',width:'th320'},
                                ]"
                              @handleDate="getVacant">
              </panelTableUser>

       this.vacanList = res.data.map((item, index) => {
          return {
            value1: index + 1,
            value2: value2,
            value3: item.sum_dai_zu,
            value4: JOIN([item.room, item.Time], '-'),
          }
        })