HTML之table的常见操作

结合$nextTick(callback)生成table序号

1. $nextTick使用场景(出现的原因)

因为Vue在更新DOM时，是异步执行的，
需要操作随着数据改变而改变的DOM结构时使用，作用是将接收的回调函数延迟到下次DOM更新循环之后执行，所以我们可以把对DOM的操作写在函数体内。

<template>
	<view class="contain">
		<scroll-view scroll-y="true" class="scrollContainer" show-scrollbar="true">
			<view class="tableContainer">
				<table class="light-table" border="1" ref="lightTable">
					<thead>
						<tr>
							<th width="40rpx">序号</th>
							<th width="80rpx">xxx</th>
							<th width="60rpx">xxx</th>
							<th width="60rpx">xxx</th>
							<th width="60rpx">xxx</th>
							<th width="60rpx">xx</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in indexNum">
							<td class="indexTd"></td>
							<td contenteditable="true"></td>
							<td contenteditable="true"></td>
							<td contenteditable="true"></td>
							<td contenteditable="true"></td>
							<td contenteditable="true"></td>
						</tr>
					</tbody>
				</table>
			</view>
		</scroll-view>
		<view class="btn">
			<button class="addCow" @click="addCow">添加行</button>
			<button @tap="submitData" class="save">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexNum:20, // 序号数量
			};
		},
		onLoad() {
			this.init()
			
		},
		methods:{
			init() {
				this.$nextTick(()=> {
					this.getIndex()
				})
			},
			getIndex() {
				const indexTds = document.querySelectorAll('.indexTd')
				let indexVal = 1
				indexTds.forEach(item=>{
					item.innerHTML = indexVal++
				})
			}
		},
	}
</script>

<style lang="scss">
	.contain {
		text-align: center;
		// background-color: pink;
		.form-title {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 42rpx;
			font-weight: 800;
		}
		.time {
			text-align: center;
			font-size: 32rpx;
			margin: 10rpx 0 38rpx 360rpx;
			text:nth-child(2) {
				margin-left: 60rpx;
			}
		}
		.scrollContainer {
			width: 100%;
			height: 814rpx;
			// background-color: salmon;
		}
		.tableContainer {
			width: 100%;
			display: flex;
			justify-content: center;
			.light-table {
				width: 98%;
				border-collapse: collapse;
				font-size: 23rpx;
				th,td {
					padding: 20rpx 2rpx;
					word-break: break-all;
					word-wrap: break-word;
					font-weight: 400;
				}
				td:focus {
					outline: none;
				}
			}
		}

		.btn {
			// display: flex;
			position: relative;
			margin-top: 40rpx;
			width: 100%;
			height: 200rpx;
			// background-color: skyblue;
			button {
				background-color: rgb(22, 155, 213);
				color:#fff;
			}
			.addCow {
				position: absolute;
				right: 20rpx;
				width: 200rpx;
				height: 56rpx;
				line-height: 56rpx;
				
			}
			.save {
				position: absolute;
				transform: translate(-50%,-25%) ;
				left: 50%;
				width: 300rpx;
				height: 60rpx;
				line-height: 60rpx;
				bottom: 20rpx;
			}
		}
	}
</style>

获取table的每一个td内的值

<table class="light-table" border="1">
	<thead>
		<tr>
			<th width="40rpx">序号</th>
			<th width="80rpx">xxx</th>
			<th width="60rpx">xxx</th>
			<th width="60rpx">xxx</th>
			<th width="60rpx">xxx</th>
			<th width="60rpx">xxx</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="item in indexNum">
			<td class="indexTd"></td>
			<td contenteditable="true"></td>
			<td contenteditable="true"></td>
			<td contenteditable="true"></td>
			<td contenteditable="true"></td>
			<td contenteditable="true"></td>
		</tr>
	</tbody>
</table>

// 用于存放每行的td的二维数组
let arr = [] 
// 获取table
const lightTable = document.querySelector('.light-table')
// 遍历行
for (let i = 1,rows=lightTable.rows.length; i < rows; i++) {
	// 遍历当前行的每一列
	// tableObject.rows 可获取包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。
	for(let j = 0, cells = lightTable.rows[i].cells.length; j < cells; j++) {
		// 如果当前行的数组不存在，则创建一个新数组，用于存放当前行的所有列
		if(!arr[i]) {
			arr[i] = new Array()
		}
		// 当前行所有列的值的集合
		arr[i][j] = lightTable.rows[i].cells[j].innerHTML
		console.log(cells,'cells')
	}
}

HTML可输入table不让td内容撑开

给确定宽度的td添加样式
word-break:break-all 和 word-wrap:break-word 都为强制换行
两种的区别：
word-break : normal | break-all | keep-all
word-wrap : normal | break-word

• word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
• word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
  参考链接

HTML合并单元格

1. 给要合并的th/td添加 colspan=“num” 或者 rowspan=“num”
   colspan为跨行合并列，rowspan为跨列合并行；num为合并单元格数量
2. 删除被合并的多余th/td