VUE 向下填充示例

<template>
	<el-table :data="tableData" border>
		<el-table-column prop="name" label="姓名" width="180"></el-table-column>
		<el-table-column prop="value" label="数值">
			<template #default="{ row, $index }">
				<el-input
					v-model="row.value"
					@blur="fillDown($index)"
					size="small"
					clearable
				>
					<template #append>
						<el-button icon="bottom" @click="fillDown($index)"> 向下填充</el-button>
					</template>
				</el-input>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
export default {
	data() {
		return {
			tableData: [
				{ name: '张三', value: '' },
				{ name: '李四', value: '' },
				{ name: '王五', value: '' },
				{ name: '赵六', value: '' }
			]
		}
	},
	methods: {
		fillDown(index) {
			const currentValue = this.tableData[index].value
			if (currentValue) {
				// 从下一行开始填充
				for (let i = index + 1; i < this.tableData.length; i++) {
					this.tableData[i].value = currentValue
				}
			}
		}
	}
}
</script>