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

实现效果:

 实现方法:

<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即可。


版权声明:本文为weixin_43312391原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。