vue table 加序号及列居中

JungGreen

已于 2023-06-08 17:19:22 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js

于 2023-06-08 16:39:50 首次发布

本文链接：https://blog.csdn.net/weixin_42264750/article/details/131110462

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文描述了如何在Vue.js应用中使用ElementUI的el-table组件来创建带序号的表格，并实现数据分页。序号根据currentPage和pageSize动态计算，同时展示了如何设置单元格和表头内容居中对齐。此外，文中还包含了可切换状态的开关按钮操作。

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

1.table加序号

序号列：

<el-table-column label="序号" type="index" width="60px">
	<template #default="scope">
		<span v-text="getIndex(scope.$index)"></span>
	</template>
</el-table-column>

state中封装的table分页信息：

       pagination: {
			currentPage: 0,
			pageSize: 10,
			total: 0
      }

获取序号的方法：

const getIndex = (index: number) => {
	return (state.pagination.currentPage - 1) * state.pagination.pageSize + index + 1;
}

列居中

内容居中：

:cell-style="{ textAlign: 'center' }"

表头居中

:header-cell-style="{textAlign: 'center'}"

部分源代码如下：

        <el-table v-loading="tableData.loading" :data="tableData.data" style="width: 100%" 
				:cell-style="{ textAlign: 'center' }" 
				:header-cell-style="{textAlign: 'center'}" >
				
				<el-table-column label="序号" type="index" width="60px">
					<template #default="scope">
					<span v-text="getIndex(scope.$index)"></span>
					</template>
				</el-table-column>

				<el-table-column prop="jobClassName" label="任务执行类全限定名"   show-overflow-tooltip ></el-table-column>
				<el-table-column prop="jobName" label="task_name"   show-overflow-tooltip ></el-table-column>
				<el-table-column prop="group" label="task_group"   show-overflow-tooltip ></el-table-column>
				<el-table-column prop="triggerState" label="task_status" show-overflow-tooltip width="100px" ></el-table-column>
				<el-table-column prop="nextFireTime" label="task_next_firing_time"  show-overflow-tooltip ></el-table-column>
				
				<el-table-column prop="enableStatus" label="firing/pause task" width="150px">
					<template #default="scope">
						<span class="property-name-cell">
							<el-switch
								:value="scope.row.enableStatus"
								active-value="1"
								inactive-value="0"
								@change="pauseJob(scope.row.triggerState == 'PAUSED', scope.row)"
							/>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="operations" width="150px">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="immediatelyExecuteJobOneTime(scope.row)">execute_task_immediately</el-button>
						<el-button size="small" text type="primary" @click="onOpenInstace(scope.row)">taskInstances</el-button>
						<el-button size="small" text type="primary" @click="onOpenDetailQuartz(scope.row)">taskDetai</el-button>
						<el-button size="small" text type="primary" @click="onOpenEditQuartz(scope.row)">editTask</el-button>
						<el-button size="small" text type="primary" @click="onRowDelQuartz(scope.row)">deleteTask</el-button>
					</template>
				</el-table-column>
			</el-table>
            <el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="tableData.param.pageNum"
				background
				v-model:page-size="tableData.param.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableData.total"
			>
			</el-pagination>