Table中使用<input />
推荐使用
- 使用template标签 定义scope属性
- 使用scope.row.xxx 访问当前行的内容
<el-table-column label="价格" min-width="150">
<template scope="scope">
<el-input size="small" v-show="scope.row.edit" v-model="editData.unitPrice" type="number" @change="editFunc(scope.row,$event)">
<template slot="prepend">￥</template>
</el-input>
<span v-show="!scope.row.edit">
<i class="price mark-i">￥ </i>{{scope.row.unitPrice}}
</span>
</template>
</el-table-column>
// input 使用需要添加一个指令inline-template
<el-table-column inline-template label="数量" width="200">
// 绑定数据 v-model="row.xxx" row表示当前行的所有内容
<el-input-number v-model="row.id" :controls="false"></el-input-
</el-table-column>
效果