a-table单元格指定合并以及表格双击编辑以及未填写指定验证功能

最新推荐文章于 2025-04-10 16:39:34 发布

Coisini_甜柚か

最新推荐文章于 2025-04-10 16:39:34 发布

阅读量1.2k

点赞数 7

分类专栏：前端知识库 Vue3 文章标签：学习 vue3 前端

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_45266979/article/details/139952523

版权

文章目录

a-table单元格指定合并以及表格双击编辑以及未填写指定验证功能

a-table单元格指定合并以及表格双击编辑以及未填写指定验证功能

一、 a-table单元格指定合并

1. a-table

				<a-table
					ref="table"
					:pagination="{
   
						position: ['none']
					}"
					:columns="columns"
					:dataSource="tableData"
					:alert="false"
					:row-key="(record) => record.id"
					bordered
				>
				</a-table>

2. columns

columns.value = [
			{
   
				title: '序号',
				dataIndex: 'index',
				align: 'center',
				width: '300px',
				customRender: function ({
     text, record, index }) {
   
					if (record.objectName === '单元测评结果（符合/部分符合/不符合/不适用）') {
   
						return record.objectName
					} else {
   
						return index + 1
					}
				},
				customCell: (data, index) => {
   
					if (data.objectName === '单元测评结果（符合/部分符合/不符合/不适用）') {
   
						return {
   
							colSpan: 2
						}
					} else {
   
						return {
    colSpan: 1 }
					}
				}
			},
			{
   
				title: '测评对象',
				dataIndex: 'objectName',
				align: 'center',
				width: '300px',
				customCell: (data, index) => {
   
					if (data.objectName === '单元测评结果（符合/部分符合/不符合/不适用）') {
   
						return {
   
							colSpan: 0
						}
					} else {
   
						return {
    colSpan: 1 }
					}
				}
			},
			{
   
				title: '测评指标符合情况(符合/部分符合/不符合/不适用)',
				dataIndex: 'content1',
				align: 'center',
				width: '300px',
				children: [
					{
   
						title: '身份鉴别',
						dataIndex: '9',
						align: 'center',
						width: '300px'
					},
					{
   
						title: '远程管理通道安全',
						dataIndex: '10',
						align: 'center',
						width: '300px'
					},
					{
   
						title: '系统资源访问控制信息完整性',
						dataIndex: '11',
						align: 'center',
						width: '300px'
					},
					{
   
						title: '重要信息资源安全标记完整性',
						dataIndex: '12',
						align: 'center',
						width: '300px'
					},
					{
   
						title: '日志记录完整性',
						dataIndex: '13',
						align: 'center',
						width: '300px'
					},
					{
   
						title: '重要可执行程序完整性、重要可执行程序来源真实性',
						dataIndex: '14',
						align: 'center',
						width: '300px'
					}
				]
			}
		]

3. 图例

在这里插入图片描述

二、a-table 表格双击编辑以及未填写验证

1. a-table

		<a-table
			style="width: 100%"
			bordered
			:dataSource="tableData"
			ref="selection"
			:pagination="false"
			:columns="columns"
			:customRow="Rowclick"
			:row-key="(record) => record.evaluationEnvironmentId"
			:class="{ 'no-hover': disableHover }"
		>
			<template #bodyCell="{ column, index, record }">
				<template v-if="column.key === 'handle'">
					<a-space>
						<a-button type="primary" danger @click="onDelete(record, index)" :disabled="isReview"> 删除 </a-button>
						<a-button
							type="primary"
							@click="getModifications(record, index)"
							:disabled="isReview"
							v-if="record.checkState == '0' || !record.checkState"
							style="background: rgb(183 175 175); border: none"
						>
							后续修改
						</a-button>
						<a-button
							type="primary"
							@click="getModifications(record, index)"
							:disabled="isReview"
							v-if="record.checkState == '1'"
							style="background: #f88f5e; border: none"
						>
							后续修改
							<CloseCircleFilled />
						</a-button>
					</a-space>
				</template>
			</template>
		</a-table>

2. js

子组件内容

//双击编辑

const Rowclick = (columns, index, record) => {
   
		return {
   
			onClick: (event) => {
   
				if (!isReview) {
   
				//isReview为验证在什么条件下可以编辑/不可以编辑
					if (