element-ui el-table 高度自适应（上中下结构）

最新推荐文章于 2024-05-29 14:59:22 发布

xiaobo-921

最新推荐文章于 2024-05-29 14:59:22 发布

阅读量222

点赞数 3

文章标签： ui vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_39582021/article/details/136602597

版权

本文描述了一个使用Vue.js构建的应用，展示了如何创建一个带有动态操作列（如删除和编辑）的表格列表，以及如何实现分页功能。主要内容围绕el-table、el-button和el-pagination组件的使用。

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

<template>

	<div class="channel-box">

		<div class="top-menu">
			<el-button class="new-apk" @click="dialog = true" type="primary">新增渠道</el-button>
		</div>

		<div class="table-list">

			<el-table ref="multipleTable" @row-click="handleRowClick" :data="tableData" height="100%"
				:highlight-current-row="true" style="width: 100%" stripe border>


				<el-table-column prop="updateTime" label="更新时间" width="132" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.updateTime }}</span>
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="180" show-overflow-tooltip>
					<template slot-scope="scope">

						<el-button size="mini" type="danger"
							@click.stop="deleteItem(scope.$index, scope.row)">删除</el-button>

						<el-button size="mini" type="primary"
							@click.stop="editItem(scope.$index, scope.row)">编辑</el-button>
					</template>
				</el-table-column>


			</el-table>

		</div>

		<!-- 分页-->
		<div class="handler-box">
			<div style="margin: 0 auto;">
				<el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>


	</div>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		components: {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	// scoped 这个属性一定要去掉
	.channel-box {
		display: flex;
		height: calc(100vh);
		padding: calc(0.5vh);
		box-sizing: border-box;
		flex-direction: column;

		.top-menu {
			position: relative;
			padding: 0.625rem 0;

			.new-apk {
				float: right;
				margin-right: 1rem;
			}

		}

		.table-list {
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			overflow-y: auto;
		}

		/* 底部分页*/
		.handler-box {
			display: flex;
			background-color: #fffefa;
			padding: 10px;
			text-align: right;

		}


	}
</style>