el-table中加入el-input框和el-input-number框，实现el-table的可编辑功能

刚刚好ā

于 2022-07-29 16:58:30 发布

阅读量4k

点赞数

分类专栏：样式文章标签： vue.js javascript 前端 elementui vue

本文链接：https://blog.youkuaiyun.com/weixin_43312391/article/details/126059574

版权

样式专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Element UI中使用el-table实现动态输入小数位数和设置上下限，并通过el-input-number和el-input组件配合template展示。方法涉及表格列的配置及 handleChange事件的处理。

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

实现效果：

实现方法：

<el-table class="drow_table" :data="tableData" style="width: 100%" row-key="id">
					<el-table-column type="selection" width="45px"></el-table-column>
					<el-table-column type="index" label="序号" width="50px"></el-table-column>
					<el-table-column label="小数位数" property="digit" width="140px">
						<template slot-scope="scope">
							<el-input-number v-model="scope.row.digit" @change="handleChange" :min="0" :max="5" label="描述文字"></el-input-number>
						</template>
					</el-table-column>
					<el-table-column label="上限" property="maxVal">
						<template slot-scope="scope">
							<el-input v-model="scope.row.maxVal"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="下限" property="minVal">
						<template slot-scope="scope">
							<el-input v-model="scope.row.minVal"></el-input>
						</template>
					</el-table-column>
				</el-table>

methods:{
//  InputNumber 计数器
		handleChange(value) {
			console.log(value)
		},}

在需要加入el-input和el-input-number的列使用template即可。