前端自定义表格_前端表格-优快云博客

本文链接：https://blog.youkuaiyun.com/chenhuan9/article/details/144050396

文章目录

一、表格左侧固定，右侧区域滑动
- 1.html代码块
- 2.css代码块
二、表格上下滚动
总结

一、表格左侧固定，右侧区域滑动

uniapp中实现表格自定义，左侧一列固定，右侧可以左右滑动

1.html代码块

<view class="tableBox">
				<view class="tableView">
					<scroll-view scroll-x>
						<view class="table" :style="tableStyle">
							<view class="table-header">
								<!-- 表头内容 -->
								<!-- 左侧区域 -->
								<view class="title-cell">
									<view class="row">出站</view>
								</view>
								<!-- 右侧区域，tableTitle右侧表头名称 -->
								<view class="content-cell" v-for="(item, index) in tableTitle" :key="index">
									<view class="cell">{{item}}</view>
								</view>

							</view>
							<view class="table-content">
								<view class="table-content__item" v-for="(item, index) in tableData" :key="index">
								   <!-- 左侧区域内容 -->
									<view class="title-cell" :style="{background: index % 2 == 0 ? '#FAFAFA' : '#fff'}">
										<view class="row">{{item.F_TITLE}}</view>
									</view>
									  <!-- 左侧区域各列内容 -->
									<view class="content-cell">
										<view class="cell">{{item.alldd}}</view>
									</view>
									<view class="content-cell">
										<view class="cell">{{item.F_ISACCORD}}</view>
									</view>
									<view class="content-cell">
										<view class="cell">{{item.F_CHAOYUAN}}</view>
									</view>
									<view class="content-cell">
										<view class="cell">{{item.F_ANQUAN}}</view>
									</view>
									<view class="content-cell">
										<view class="cell">{{item.F_JIASHIYUAN}}</view>
									</view>
									<view class="content-cell">
										<view class="cell">{{item.F_KECHEZHENGJIAN}}</view>
									</view>
									<view class="content-cell">
										<view class="cell">{{item.F_CHUZHANQIANZI}}</view>
									</view>
									<view class="content-cell">
										<view class="cell">{{item.F_BUJIANQUANDAI}}</view>
									</view>
								</view>
								<view v-if="tableData.length == 0">
									<u-empty text="暂无数据" mode="list"></u-empty>
								</view>
							</view>
						</view>

					</scroll-view>
				</view>
			</view>

2.css代码块

主要是利用position:sticky定位，来将左侧一列固定住。

$title-width: 250rpx;
	$content-width: 250rpx;
	$white: #FFFFFF;
	$title-color: #fff;

	.tableView {
		width: 100%;	
		height: 98%;
		overflow-y: auto;
        font-size: 28rpx;
        color: #333333;
		.table {
			display: table;
			.table-header {
				font-weight: bold;
				//左侧标题
				position: sticky;
				top: 0;
				z-index: 2;
				color: #7F7F7F;

				.title-cell {
					position: sticky;
					left: 0;
					z-index: 1;
				}
			}

			.table-content {
				&__item {
					display: table-row;
					//左侧内容
					.title-cell {
						position: sticky;
						left: 0;
						z-index: 1;
					}

				}
			}

			.table-content__item:nth-child(odd) {
				background: #FAFAFA;
			}

			.title-cell {
				display: table-cell;
				width: $title-width;
				background-color: $title-color;
			}
			.content-cell {
				display: table-cell;
				width: $content-width;
			}

			.row {
				text-align: center;
			}

			.cell {
				padding: 20rpx 10rpx;
				line-height: 1.6;
				text-align: center;
			}

		}
	}

二、表格上下滚动

vue项目使用element ui中的表格，表格中的数据可以上下滚动展示，滚动到底部，又可以从头开始，持续不断，鼠标移进就停止，移出就滚动起来。

1.结构

 <div style="height:85%;" class="tableBox">
      <el-table
        :data="dataList"
        ref="scroll_Table"
        :max-height="310"
        @mouseenter.native="autoScroll(true)"
        @mouseleave.native="autoScroll(false)"
        style="height:100%;margin-top:.078rem;padding:0 5px;"
        
      >
        <el-table-column prop="driverTitle" label="预警设备" align="center">
          <template slot-scope="scope">
            <div style="display: flex">
              <img
                src=""
                alt
                style="width: .104rem; height: .104rem; margin-right:.052rem"
              />
              <span>{{scope.row.driverTitle}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="预警时间" align="center"></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <div style="display:flex;">
              <div @click="openDetail(scope.row)" class="tagName">查看</div>
              <div class="tagNameCz" style="margin-left: 10px;"  @click="openCz(scope.row)">处置</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

2.表格滚动的方法

// 设置自动滚动
    autoScroll(stop) {
      const table = this.$refs.scroll_Table;
      // 拿到表格中承载数据的div元素
      const divData = table.$refs.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      if (stop) {
        //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
        window.clearInterval(this.scrolltimer);
      } else {
        this.scrolltimer = window.setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
            // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
            // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
          }
        }, 40); // 滚动速度
      }
    }

3.element ui表格样式的调整

/* 最外层 */
::v-deep .el-table,
::v-deep.el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色透明 */
::v-deep .el-table th {
  background-color: transparent;
  color: #61dbff;
  font-size: .078rem /* 15/192 */;
}
::v-deep .el-table tr,
::v-deep.el-table td {
  background-color: #062f60;
  color: #fff;
  font-size: 0.073rem /* 14/192 */;
}
/* 整体表格 */
::v-deep .el-table {
  background-color: transparent;
}
::v-deep .el-table__body {
  width: 100% !important;
}
/* 修改表格鼠标悬浮hover背景色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #0e468b;
}
/* 修改表格最底部边框颜色和高度 */
::v-deep .el-table::before {
  border-bottom: none;
  height: 0px;
}
::v-deep.el-table td.el-table__cell {
  border-bottom: 0.026rem solid #00183a;
}
::v-deep.el-table th.el-table__cell.is-leaf {
  border-bottom: 0.026rem solid #00183a;
}
::v-deep.el-table .el-table__cell {
  padding: 5px 0px;
  background: transparent !important;
}
/* 滚动条的滑块 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #0e468b;
  border-radius: 3px;
}
/* 滚动条里面的轨道 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}


## 标题
代码如下（示例）：
```c
data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

总结

项目中表格各式各样的功能需求，如滚动，某些区域固定等。