[JavaScript知识库]vue获取表格整行数据，点击按钮编辑表格数据

点击表格行任意位置 获取整行数据

使用 vue 自带事件 @cell-click ，更多事件请看 element-ui 表格的官方文档。

<template>
	<el-table :data="..." @cell-click="cellData">
		<el-table-column prop="..." lable="..."></el-table-column>
		<el-table-column prop="..." lable="..."></el-table-column>
		<el-table-column prop="..." lable="..."></el-table-column>
	</el-table>
</template>
<script>
export default {
	data() {
		return {
			......
		}
	},
	method: {
		cellData(row){
			console.log(row);
		}
	}
}
</script>

点击行内按钮 获取整行数据

这里用按钮和下拉列表框为例，其他组件同理。
下拉列表框改变性别时，前面的列会同时改变。

<template>
	<el-table :data="...">
		<el-table-column prop="..." lable="..."></el-table-column>
		<el-table-column prop="sex" lable="性别"></el-table-column>
		<el-table-column prop="..." lable="..."></el-table-column>
		<el-table-column lable="按钮">
			<template #default="scope">
				<el-button @click="cellData(scpoe.row)">编辑</el-button>
			</template>
		</el-table-column>
		<el-table-column lable="下拉菜单">
			<template #default="scope">
				<el-select v-model="scope.row.sex" @change="cellData2(scope.row)">
					<el-option lable="男"></el-option>
					<el-option lable="女"></el-option>
				</el-select>
			</template>
		</el-table-column>
	</el-table>
</template>
<script>
export default {
	data() {
		return {
			......
		}
	},
	method: {
		cellData(row){
			console.log(row);
		},
		cellData2(row){
			console.log(row);
		}
	}
}
</script>