element-ui表格嵌套输入框
代码展示:
el-form(ref="form" :model="form" :rules="rules")
el-table(
:data="form.tableData"
style="width: 100%"
:header-cell-style="{background:'#fafafa',color:'#252525'}"
row-key="id"
)
el-table-column(
prop="name"
label="名称"
width="100"
align="center"
)
el-table-column(
prop="type"
label="类型"
width="100"
align="center"
)
template(slot-scope="scope")
span(v-if="scope.row.type === 1") 礼品券
span(v-if="scope.row.type === 2") 代金券
el-table-column(
prop="available"
label="可用(张)"
width="100"
align="center"
)
el-table-column(
prop="occupy"
label="已占用(张)"
width="100"
align="center"
)
el-table-column(
prop="amount"
label="优惠面额"
width="100"
align="center"
)
template(slot-scope="scope")
span {{scope.row.amount}}元
el-table-column(
prop="threshold_amount"
label="启用门槛"
width="120"
align="center"
)
template(slot-scope="scope")
span 满{{scope.row.threshold_amount}}元可用
el-table-column(
prop="expire_type"
label="有效期"
width="200"
align="center"
)
template(slot-scope="scope")
span(v-if="scope.row.expire_type === 1") 无限制
span(v-if="scope.row.expire_type === 2")
span {{dateFormat(scope.row)}}
span(v-if="scope.row.expire_type === 3") 领劵后{{scope.row.days_expire}}天有效
el-table-column(
label="发券数/人"
width="110"
align="center"
)
template(slot-scope="scope")
el-form-item( :prop="'tableData.'+scope.$index+'.num'" :rules="rules.payloadNum" class='centerInput')
el-input(
v-model.number="scope.row.num"
size="mini"
placeholder="请输入"
@blur="oninput(scope.row.available,scope.$index,scope.row.num)"
)
el-table-column(
prop="coupon_sn"
label="操作"
align="center"
)
template(slot-scope="scope")
el-link(
type="primary"
@click="deletes(scope.$index)"
:underline="false"
) 删除
.button
el-button(
type="primary"
@click="confirmSend"
) 确定发送
删除方法(通过索引直接删除绑定tableData里的数据)
deletes(index) {
this.forms.tableData.splice(index, 1);
},
表格输入框输入事件oninput,因为我的输入框会有一个验证,不能输入0或者输入比现有数据大的数据
// 用户输入框输入时
oninput(available, index, amount) {
// 输入框的值
this.multipleSelections[index].amount = amount;
// Maxavailable每一行的最大输入数据
this.Maxavailable = available;
}
验证规则:
rules1: {
payloadNum: [
{
required: true, validator: validateNum, trigger: 'blur', message: ''
},
{ type: 'number', message: '请填写数字', trigger: 'blur' }
]
},
const validateNum = (rule, value, callback) => {
if (value === '' || value === undefined) {
callback(new Error('请填写发劵数'));
return;
}
if (value > this.Maxavailable || value < 1) {
callback(new Error('请正确填写'));
return;
}
callback();
};
最后注意,在el-table下加上row-key="id",否则在进行删除操作时,上一行的错误提示,会在下一行显示