[iview]Table编辑单元格

最新推荐文章于 2024-04-28 11:34:45 发布

西格玛猫

最新推荐文章于 2024-04-28 11:34:45 发布

阅读量713

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43810973/article/details/106592065

版权

本文介绍如何在iview表格组件中实现单元格的编辑功能，通过edit.vue文件的修改，详细展示了配置和操作过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div>
		<Table
			ref="tableRef"
			:data="data"
			:columns="columns"
			style="overflow:visible"
		>
			<template slot-scope="{ row }" slot="numEdit">
				<TablesEdit
					:params="row"
					column="num"
					:edittingCellId="edittingCellId"
					:editable="true"
					@on-input="onInput"
					@on-start-edit="onStartEdit"
					@on-cancel-edit="onCancelEdit"
					@on-save-edit="onSaveEdit"
				>
				</TablesEdit>
			</template>
		</Table>
	</div>
</template>
<script>
import TablesEdit from './edit.vue'
export default {
	name: 'numTable',
	components: {
		TablesEdit
	},
	data() {
		return {
			edittingCellId: '',
			edittingText: '',
			data: [
				{
					id: 1,
					num: 1
				},
				{